WebAIM - Web Accessibility In Mind

E-mail List Archives

Re: High Contrast mode

for

From: Steve Green
Date: Mar 5, 2025 10:34PM

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