Colors and contrast
Sufficient contrast between content and background is one of the most basic, yet still commonly ignored, accessibility features of any design.
Color blindness
Contrast
Resources
Tools
There are plenty of tools out there to aid designers in optimizing their colour palettes for accessibility. My personal go-to-addresses are:
Test many foreground and background color combos for compliance with WCAG 2.0 minimum contrast.
Other tools include:
Who Can Use
"Who Can Use" by Corey Ginnivan differs from other colour contrast tools in that it not only highlights the contrast of a chosen colour combination, but also presents instant statistics what share of users might be negatively impacted by it and simulates how they would see it.
Handy, not just for design verification, but first and foremost as an educational resource.
...and here's an extensive list:
These tools are also built into developer tools in browsers:
Halation
Sometimes too much of something good is not great either. Very bright text on very dark backgrounds in particular may cause issues to up to 50% of users, despite such "extreme contrast errors" not being detected by WCAG criteria or automated testing software:
Accessibility for People with Astigmatism
While high contrast is important for accessibility, this article is a good reminder why overdoing it is not a good idea:
There is a myth about white text over black backgrounds being the best color contrast combination for accessibility, but in reality, white text on black backgrounds creates a visual fuzzing effect for people with astigmatism called “halation”.
The fuzzing effect of "halation" may impact up to half of the population, leading to difficulty reading and potentially headaches etc. when white text is placed on a black background.
It's actually quite astonishing that this "extreme contrast issue" is not a WCAG criterion itself:
Automated contrast-ratio checkers would not detect a problem or any WCAG success criteria failures using this combination of colors, but it will impact end-users. This is another reason why manual testing is still a key component of accessibility testing.
On a related note: this is particularly relevant when designing for the popular "dark mode".
This "halation" effect for example comes to play when designing for the so-called "dark mode":
Why dark mode isn’t as accessible as you might think
"Is dark mode impacting your users", Maygen Jacques asks in this article about some less-considered aspects of designing for "dark mode" -- specifically the impact of fuzzy vision from white text on black background for users with astigmatism:
Let's assume 25% of your users don't permanently need glasses but they also get this issue in conditions of low lighting; that's a total of 50% of your users experiencing a shared issue.
Designing for dark mode is about more than just inverting colours. And real-world testing will always be necessary. Most importantly, it is crucial to allow users control over turning dark mode on and off for a specific website, if the design causes them issues:
The take-home message is - give your users control; make dark mode optional.
On the same topic, also see:
Dark mode
In addition to contrast considerations (see "halation" above), implementing "dark mode" requires some thought in order to truly create an accessible feature. Some well-documented reference implementations:
