DEV Community

Ingo Steinke
Ingo Steinke

Posted on

How to provide an accessible high contrast alternative to a pastel color scheme?

Inspired by a discussion at a conference, I decided to research and put the problem, or rather challenge, into proper words. I even dared to ask it as a question on StackOverflow, although most of my questions tend to get downvoted and deleted, so better make a DEV blog post out of it as well.

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;
  }
}
Enter fullscreen mode Exit fullscreen mode

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…

Thoughts and answers are very welcome!

Discussion (2)

Collapse
yuridevat profile image
π•π•¦π•π•šπ•’ πŸ‘©πŸ»β€πŸ’»

I am not sure if I got your question right.

I tried it with my MacBook and everything worked out fine (passed the color test). The darker option was shown after I switched my accessibility preference on my MacOS.

Still, as an Accessibility Advocate I highly recommend using color with high ratio already from the very beginning (in the design process). This doesn't necessarily mean that you don't be able to use pastel colors anymore, but you could use them combined with a dark font color.

Collapse
ingosteinke profile image
Ingo Steinke Author • Edited on

I should try to reverse the logic in the code snippet to make high contrast the actual default, not the other way around: codepen.io/openmindculture/pen/eYV.... 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?