Design & Media3 min read
How to Check Color Contrast for Free
Pale grey text looks refined on a designer's screen and disappears on everyone else's. Here is how to check a colour pair properly, and what the numbers mean.
KLYRO TeamPublished
Contrast is the difference in brightness between text and the colour behind it. Too little of it and the text is hard work to read, particularly on a phone outdoors, on a cheap screen, or for anyone whose eyesight is not perfect.
The accessibility guidelines put a number on it. A contrast ratio is a single figure between 1:1 and 21:1, and there are thresholds you either meet or do not.
What the numbers mean
There are two levels and two text sizes, which gives four results for any pair.
| Threshold | Applies to | Level |
|---|---|---|
| 4.5:1 | Normal text, under about 18.5px | AA |
| 3:1 | Large text, from about 18.5px bold or 24px regular | AA |
| 7:1 | Normal text | AAA |
| 4.5:1 | Large text | AAA |
Large text gets an easier threshold because size does some of the work that contrast otherwise has to. That is also why a heading can use a colour that would fail underneath it in body copy.
How to check a pair
Enter the two colours
Type hex values, or use the colour pickers. The order matters only for readability; the ratio is the same either way round.
Read the ratio, then the four results
The ratio is the fact. The four pass or fail results are what it means for the size and level you are working to.
Look at the live sample
The preview shows real text at both sizes on the pair you entered. A number can pass and still be uncomfortable; the sample is the reality check.
When a pair fails
The usual fix is to darken the text rather than change the background, because a background is normally load-bearing in a design and a text colour rarely is.
The Klyro checker can find the nearest passing colour for you. It walks the same hue towards the threshold and then re-checks the result after rounding to 8-bit values, so it never offers a colour that passes in theory and fails once your browser has it.
Common mistakes
- Judging by eye on a good screen. A calibrated display in a dim room flatters everything. The number does not.
- Testing the heading and not the caption. Small print is where contrast problems actually live.
- Placing text over a photograph. The ratio changes across the image. Either put the text on a solid panel, or add an overlay dark enough that the worst part of the photo still passes.
- Using colour alone to carry meaning. A red border that means "error" tells nothing to somebody who cannot distinguish it. Write the word as well.
- Forgetting disabled and placeholder text. It is meant to look secondary, not to be invisible.
Questions
- What ratio should I aim for?
- 4.5:1 for body text is the level most organisations work to. If you can reach 7:1 without the design suffering, take it — nobody has ever complained that text was too easy to read.
- Does this apply to logos and icons?
- Logos are exempt from the text rules. Icons that carry meaning on their own should still reach 3:1 against their background so they can be made out.
- Is the ratio calculated exactly?
- Yes. It uses the official WCAG relative luminance formula rather than an approximation, and the suggested colours are re-checked after rounding.