Usability and accessibility » Colors and contrast
Sufficient contrast between content and background is one of the most basic, yet still commonly ignored, accessibility features of any design.
There are plenty of tools out there to aid designers in optimizing their colour palettes for accessibility. My personal go-to-addresses are:
Very basic, but efficient — calculates the contrast between two colours and allows to adjust their brightness until they comply with WCAG criteria.
This tool is particularly handy, as it visualizes all possible combinations of a defined palette and its contrast values.
Other tools include:
…and here’s an extensive list:
These tools are also built into developer tools in browsers:
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:
This “halation” effect for example comes to play when designing for the so-called “dark mode”:
I'm Sebastian, Sociologist and Interaction Designer aiming to bring together social science and design for inclusive, privacy-focused, and sustainable "human-first" digital strategies. This is my "digital garden" with carefully curated resources. For a more stream-like outlet, see my journal.