Colour Contrast Ratio
Design Processes
How much lighter or darker text is than what sits behind it, expressed as a number.
In practice
Colour contrast ratio compares the luminance of foreground and background, from 1:1 (identical) to 21:1 (black on white). Accessibility guidelines require at least 4.5:1 for body text and 3:1 for large text and interface components. It is the accessibility rule designers break most often, usually in the name of subtlety — and the one most easily checked before it ships.
Questions
What is Colour Contrast Ratio?
Colour contrast ratio is the measured luminance difference between text or a control and its background, used to judge whether it is readable by people with low vision.
Why do you use Colour Contrast Ratio?
Low contrast is unreadable for a large share of people in ordinary conditions — bright sun, cheap screens, ageing eyes — not just those with a diagnosis.
How do you use/apply Colour Contrast Ratio?
Check every text and control pairing with a contrast tool, aim for 4.5:1 on body text and 3:1 on large text and UI, and adjust the palette rather than the rule.
When do you use Colour Contrast Ratio?
When defining a palette, when adding any new colour pairing, and in both light and dark themes.
Who uses Colour Contrast Ratio?
Every designer choosing colours, and developers implementing states like disabled and placeholder.
