In this article
A designer picks a soft grey for the body text. It looks calm and modern on a big, bright monitor. Then someone opens the page on a phone, outside, at noon, and the paragraph simply disappears.
Whether text is readable is not a matter of taste. There is a number for it, it is easy to compute, and it is the same number that accessibility rules and audits use.
The ratio, in plain words
Contrast ratio compares how bright two colours are. It runs from 1:1, meaning identical colours, up to 21:1, which is pure black on pure white. Bigger is easier to read.
The brightness is called relative luminance. Each of red, green and blue is first converted to a linear value, then combined with weights that reflect how the eye sees:
L = 0.2126 × R + 0.7152 × G + 0.0722 × B
Green carries most of the weight and blue almost none, which is why a pure blue looks much darker than a pure green of the same “strength”. Then the ratio is:
ratio = (L lighter + 0.05) ÷ (L darker + 0.05)
The 0.05 stops the maths from blowing up near black. You never need to do this by hand, but it helps to know there is no opinion hidden in it.
The thresholds that matter
| What you are checking | Level AA (the usual target) | Level AAA (stricter) |
|---|---|---|
| Normal text | 4.5 : 1 | 7 : 1 |
| Large text (about 24 px, or 19 px bold, and up) | 3 : 1 | 4.5 : 1 |
| Icons, input borders, chart lines | 3 : 1 | No separate level |
These are the WCAG 2.x values, which most laws and audits refer to today.
Some real colours on white
Numbers are easier to feel with examples. Here are a few text colours on a plain white background:
The 4.5 line is the pass mark for normal text. #767676 is famously the lightest grey that passes on white. The very next shade, #777777, fails.
Look at the two shades of grey. They are one step apart and you cannot tell them apart by eye, yet one passes and one does not. The same is true of the indigo #6366f1, a very popular button colour. As white text on that colour it lands at 4.47, just under 4.5. Moving to #4f46e5 fixes it with a change most people would never notice.
How to fix a failing pair
- Darken the text (or lighten it on a dark background) a little at a time. Small steps are often enough.
- Change the colour that does less work. If a brand colour is the problem, keep it for large or decorative things and use a darker version for text.
- Make the text bigger or bolder when you cannot change the colour. Large text only needs 3 : 1.
- Re-check after every change, and check light and dark themes separately.
Newer methods for judging readability are being developed, and they may change what future guidelines say. For now, the 4.5 and 3 targets are the ones you will be measured against, and meeting them is a solid, cheap first step.
Questions people ask
What is a good colour contrast ratio?
For normal text, at least 4.5 : 1 to meet WCAG level AA, and 7 : 1 for AAA. Large text needs 3 : 1 for AA.
What counts as large text?
Roughly 24 pixels and above, or about 19 pixels and above when bold. Smaller text counts as normal text and needs the higher ratio.
Does contrast apply to buttons and icons?
Yes. Parts of the interface that you need to see to use it, such as input borders, icons and chart lines, should have at least 3 : 1 against their surroundings.
Is black on white always best?
It has the highest ratio, 21 : 1, but very high contrast can feel harsh for long reading, especially on dark themes. Slightly softer pairs that still pass 7 : 1 are comfortable.
Why does the same colour pass on one background and fail on another?
Contrast is a relationship between two colours. Change either one and the ratio changes, so every text and background pair needs its own check.