E-mail List Archives
Thread: High Contrast mode
Number of posts in this thread: 2 (In chronological order)
From: Sean Murphy
Date: Wed, Mar 05 2025 6:00PM
Subject: High Contrast mode
No previous message | Next message →
All,
I want to understand if the WCAG has any criteria that covers High contrast
mode. 1.4.3 does not really cover it from my reading. How does Dark mode fit
within the criteria? Is there a difference between dark mode and high
contrast mode? High Contrast comes from the OS and all browsers far as I am
aware supports this? What type of direction should be given to product teams
on this point? What technical challenges surround High contrast mode?
Yes, I relies it is a user choice to use High Contrast. From a users point
of view, this might be the only way they can read text by changing the high
contrast mode on the OS. Thus if web pages don't support it, they cannot
read the content.
Thoughts?
From: Steve Green
Date: Wed, Mar 05 2025 10:34PM
Subject: Re: High Contrast mode
← Previous message | No next message
WCAG does not have any success criteria that require websites to be usable with High Contrast mode. However, EN 301 549 does, which will be relevant if you work on anything where the EU Website Accessibility Directive or European Accessibility Act apply. In Windows, there isn't just one High Contrast mode. There are several preset themes and you can create your own custom themes. I suspect that if a website is usable with one of the preset themes, then it should be usable with all of them, but I have not verified this.
Dark mode isn't an accessibility feature, and I am not aware of any accessibility specifications that even mention it. I don't use it because I have difficulty reading light text on a dark background, so I don't know much about it.
I don't know anything about the culture of your organisation, which makes it difficult to make recommendations. If the developers or products owners are receptive to accessibility, it makes sense to encourage them to support High Contrast mode. However, you don't have any leverage unless the EU laws apply. It wouldn't surprise me if the developers are more receptive to supporting dark mode because a lot of them use it. However, I regard it as an extremely low priority, and there are better things they could do with the time.
I don't think that supporting High Contrast mode is technically difficult at all. The challenge is in deciding what needs to be done. Focus indicators are an obvious issue. Very often, they are implemented using CSS properties that are not supported in High Contrast mode, such as box shadow. All focusable components must therefore have an outline style. If a different CSS property is used for the focus indicator, it is common to set the outline value to zero. Instead, it should be set to transparent, in which case it will be displayed in High Contrast mode. I typically set the width to 2 or 3 pixels and the outline style to solid.
Another issue is that you lose a lot of visual cues in High Contrast mode, particularly with regard to the grouping of components. Dropdown menus, dialogs and other overlays are a particular problem because it is difficult to differentiate between them and the content behind them because they all have the same background colour. I would therefore recommend putting borders around such content and other groupings such as each column in a multi-column layout, and maybe the footer. Again, the border should be set to transparent so it is not normally visible. A thickness of 1 pixel should be sufficient.
Steve Green
Managing Director
Test Partners Ltd