0

We're implementing different color themes across our apps.

All our basic themes are WCAG level AA compliant, but now it's high contrast theme's turn. It's going to be a theme that features maximum contrast for - hopefully - the best accessibility (we're aiming at level AAA and beyond).

Now, intuitively, it seems that the background of #000000 (black) and foreground (text, icons and other data) of #ffffff (white) is the way to go, since this combo provides maximum contrast of 21.

What I keep seeing in different accessible usecases, is high contrast themes using yellow #ffff00 for foreground, which provides the contrast ratio of 19.56 (which is still great, but less than white). Among yellow, bright green and bright blue are used too, but i feel like yellow is more prevalent.

The closest to a standard or guidelines I've seen for that are Microsoft's XAML theme resources reference for Windows 8, that also feature those colors, but makes them more contextual.

Some colors from XAML theme resources reference

Government portals of Latvia make use of multiple high contrast themes, among which there's black-and-white and multiple black-and-yellow themes. And some just feature black-and-yellow for high contrast mode.

Screenshot of Latvian government portal using yellow in their high contrast theme

Another screenshot of Latvian government portal using yellow in their high contrast theme


The question is, what's so special about yellow? Why do they go for bright yellow instead of white? Does it have any significant upsides for certain types of colorblindness? Do we have any studies or research about that?

1 Answer 1

1

Yellow is selected because too much contrast can also be bad. I had only anecdotal knowledge about this from users with visual disability. But I managed to find some sources to back this up.

From Harvard University's accessibility site:

Avoid very high contrast. Be aware also that for some people, especially people with dyslexia, a very high contrast color scheme can make reading more difficult. It’s a good idea to choose an off-white background color rather than a white background to aid on-screen reading.

As a note from W3C's understanding documentation for both Contrast (Minimum) and Contrast (Enhanced):

Some people with cognitive disabilities require color combinations or hues that have low contrast, and therefore we allow and encourage authors to provide mechanisms to adjust the foreground and background colors of the content. Some of the combinations that could be chosen may have contrast levels that will be lower than those those specified here.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.