When we talk about accessible colour design, most conversations stop at WCAG contrast ratios. Pass the AA threshold ÔÇö 4.5:1 for normal text ÔÇö and move on. But for the millions of people with colour vision deficiencies or low vision, that minimum standard often isn't enough.
Why contrast ratios fall short
Contrast ratios measure luminance difference between two colours. They don't account for hue discrimination, which is how most people with deuteranopia (the most common form of colour blindness) perceive the world. A red button on a green background can pass AA contrast requirements and still be completely indistinguishable to someone with red-green colour blindness.
A better framework
Instead of asking "does this pass WCAG?", ask three questions:
- Can it be understood without colour? Use shape, pattern, or label as a redundant signal.
- Does it work in greyscale? Desaturate your design and check if hierarchy survives.
- Have you tested with real users? Tools like Stark or Colour Oracle simulate colour vision deficiencies, but user testing reveals edge cases no simulator catches.
Building a robust palette
Choose a base palette where every meaningful colour pairing has both sufficient contrast and a distinct luminance difference. Blues and yellows are naturally high-contrast in greyscale. Avoid using red and green as the only differentiators.
For interactive states ÔÇö hover, focus, active, error, success ÔÇö ensure each state is distinguishable by both colour and a non-colour signal (border, icon, label change).
