I attended Piccia Neri’s Masterclass Get it Seen and I learned a few important things about how to combine colors for an accessible design:
- Following the WCAG rules for color standard doesn’t mean that a website is accessible. For example, black text on a red background meets the WCAG contrast requirements, but it’s painful for the eyes and difficult to read.
- WCAG contrast rules use a ratio formula, but APCA (which stands for Accessible Perceptual Contrast Algorithm) is a new method for calculating readability contrast that aligns more closely with human visual perception.
It’s not the colors that are accessible, but the way we combine them.
How to chose accessible colors?
- The safest accessible technique is to use just 1 Primary color + Greys.
- The 2nd safest technique is to use: Primary color, Accent color, and Greys.
Step 1. Pick your base color;
- Lower brightness (max 80%);
- Lower saturation (max 80%);
- Check the color combinations in contrast apps;
- Avoid pure white;
- Avoid pure black.
Step 2. Tweak your base color to have 5-10 lighter and darker shades;
Step 3. Check with greys before adding colors.
Step 4. Pick the accent color
Step 5. Check all the color combinations for accessibility.
A few more ideas:
- How to improve color contrast for a color which doesn’t have enough contrast? Change the luminosity level to black in the HUE model of color.
- OKLCH model of color works better for Accessibility.
- Contrast is not just about color. It’s about dark and light, thick and thin, small and large.
- The automated tools will not point out the inaccessible fonts!
- A good contrast starts with choosing the typeface.
- Use alternatives to color to express the meaning: patterns, textures.
- When in doubt, take a look at what big people do (MailChimp – a proper usage of colors, especially yellow, for accessibility)
- For me, serif fonts are more readable when the chunks of text are long.
Useful Tools for combining colors for accessibility:
The Get it Seen MasterClass is scheduled for a second round on Wednesday, March 5, offering another opportunity to gain clarity on combining colors for accessible websites. Piccia doesn’t just share knowledge—she brings passion to every step of the design process. It’s a truly valuable investment!
