How is it possible to ensure a website's color theme offers a high-contrast alternative which complies to the WCAG 2 minimum contrast requirements while preferring a pastel, low-contrast theme unless the user wants or needs higher contrast?

I tried to define a fallback theme with a higher contrast and providing a lower contrast version unless the user requires high contrast, using the prefers-contrast media query, but the following example (also as a codepen here which fails the accessibility audit by the axe Chrome extension due to the low contrast of 2.71 of foreground color: #eeeeee, background color: #f26600.)

What CSS code is needed to define a proper fallback? How are the users expected to indicate their contrast preference, and is there a way to make browsers or operating systems adapt the contrast preference based on daylight settings, dark/light theme, ambient light sensors or the like?

p {
  background-color: #f26600;
  color: #eeeeee;
}

@media (prefers-contrast: more) {
  p {
    background-color: #aa3300;
    color: #ffffff;
  }
}

I also tried to to reverse the logic in the code snippet to make high contrast the actual default, not the other way around: codepen.io/openmindculture/pen/eYVPgoo. This validates without color contrast warning, but will this ever show the pastel version? Where could I possibly state that I would prefer less contrast, and how would I know?

CodePudding user response：

That’s a very interesting question.

On providing an alternative contrast version

Providing a control with a sufficient contrast ratio that allows users to switch to a presentation that uses sufficient contrast actually is a sufficient technique to meet WCAG’s contrast criteria.

They do require the following, though:

1. The link or control on the original page must itself meet the contrast requirement of the desired SC. (If the user cannot see the control they may not be able to use it to go to the new page.)
2. The new page must contain all the same information and functionality as the original page.
3. The new page must conform to all of the SC for the desired level of conformance. (i.e., the new page cannot just have the desired level of contrast but otherwise not conform).

Since you only want to switch styles, it’s quite likely that you would meet 2 and 3. You would only need to add a button that switches styles.

You could have a second stylesheet (.css file) that defines the contrast version. Then you can do the following:

<link href="contrast.css" rel="alternate stylesheet" type="text/css" title="Contrast Styles">

This will allow browsers that support these (Firefox) to offer a style switch to the user. See Alternative style sheets

Then you add a button which activates that stylesheet via JavaScript, and a media query which imports it if @media (prefers-contrast: more).

It is uncertain if your audit tools will give you a pass on that one while the alternative stylesheet is active. In the end a manual audit is always necessary for legal conformance, where you should pass 1.4.3.

How are the users expected to indicate their contrast preference

There was a big discussion back in the days whether a font-size control should be part of the site, since it has been available in browsers for a long time. WCAG never demanded it (afaik), but the argument for a control on the site was that a lot of users didn’t know their browser well enough.

The same argument would count for the contrast mode (a lot of people might not know the OS’s contrast settings or don’t have access to them) but this time WCAG actually demand a control any ways.

Is there a way to make browsers or operating systems adapt the contrast preference based on daylight settings, dark/light theme, ambient light sensors or the like?

There are ways to use the dark theme setting depending on daylight settings in Android, and probably some apps that allow for switching basede on ambient light.

I do not know of any feature that allows setting contrast mode based on the same, not even in Windows 11 which improved their accessibility contrast themes a lot.

Which might make sense, since it’s more of a statement that the user needs higher contrast, be it day or night, light or dark theme.