High-contrast — when you think dark mode is enough
The importance of the high-contrast theme in interfaces and its differences from the dark theme
You made so much effort yourself studying shades of gray, balancing them, and fitting them into the brand’s palette in order to create the perfect dark mode, managed to find space and time in the team’s schedule to create the feature and now you someone is telling you about high-contrast.
Wait, you told me dark mode was good for accessibility, then why are we talking about a third theme? Well, let’s have a talk.
Much has already been said about the benefits of dark mode, such as being a great option for some types of Daltonism and users with photophobia, keratoconus, glaucoma, etc. But now is the time to take a deep look at WCAG’s requirements and take our accessibility level even higher.
By understanding how people perceive colors, it’s possible to design a better digital environment for them. Let’s begin with the fact that every single person has or will experience a disability in their life. That means — and I will use only visual examples for this case —it can be a permanent disability, such as blindness, color blindness, visual diseases, and disorders; a temporary disability, like a person who has a cataract but will have surgery; or a situational disability, like trying to use your phone under the sun. Considering that, it’s clear that disability is not on people. It’s in the products.
“Then how can I create a good experience that works for all cases?” It’s simple: you can’t. And that is because every singularity will demand a different approach — you’ll have users who can’t stand the light because their eyes burn and you’ll also have low-vision users who actually need the light. Therefore, the best solution is to provide them with options from which they can choose the one that suits them best. Twitter solved this issue very well with the themes “default” (light), “dim” (dark), and “lights out” (high-contrast).
But in practice, what’s the high-contrast theme?
Consists in a more limited palette that focuses on having a higher contrast between colors, and that usually means fewer colors. To ensure the minimum contrast ratio of 7:1 required by WCAG’s AAA level, the high-contrast theme will benefit from a darker background, usually pure black, unlike the dark mode, which balances between shades of gray. The colors, instead of the original palette, will be of extremely contrasting tones with the background, usually neon yellow — but that’s not a rule. Sometimes, you may need to use outlines to delimit components when lacks colors to do it.
How exactly does the high-contrast theme help accessibility?
There are two rarer kinds of Daltonism, the most extreme ones:
- Monochromatic, in which the person can only see one color and its shades, besides shades of gray.
- And Achromatic, the person can’t perceive any color and sees everything in shades of gray.
Both cases consist in relying on the contrast between the shades of gray, which is hard to prevent when you’re not colorblind. The high-contrast will make sure the colors don’t get mixed up, delivering information clearly and making a better user experience.
Daltonism itself is not a defined rule — each person will have a type and a different level from another. So besides the two extreme cases I’ve mentioned, there are some people who may see two or more colors, but depending on their condition, contrast can be really important and game change.
To comply with WCAG’s success criterion C 1.4.6: Contrast (Enhanced) (Level AAA) and 1.4.11:Non-text Contrast (Level AA), it’s necessary that every text, essential images, and interface components have a minimal contrast ratio, which usually it’s hard to have when there’s a brand defined palette. When a high-contrast theme is provided, the light and/or dark themes turns optional, so that the standard palette can remain untouched once there will be another theme providing the required accessibility.
How can I be sure that my colors are contrasting with each other
You need to do a contrast ratio test with the colors and ensure they are WCAG-compliant. There are several online tools and they usually indicate the rate and whether it meets the WCAG AA and AAA success criteria, in small and large texts. Color Contrast Checker is a good option in this case.
And the best part: be creative!
People don’t want to be categorized and put in the box of their disability. People want to feel included and that the product or service they are using cares about creating the most unique and awesome user experience. So when designing an accessibility feature and/or setting, consider a different approach by naming the diverse themes and letting users try them on, and choosing what fits them best, regardless if they have a disability or not.
They will be even able to switch themes if it feels better to use the dark mode at night, for example, and the light mode during the day. In the last experience I had creating the three modes, what we found out was that the high-contrast theme was so good that many people chose it instead of the others — and considering the statistics, probably a huge majority of them didn’t even have color blindness.
If you are working on a personal website project, portfolio, blog, and such, you can even make your CV color-themed like me. After all, job recruiters can be visually impaired too.
Have you ever worked with high-contrast themes? Tell me about your experience, I’ll love to know. Chers 👋
