How to check colour contrast on a website
The ratio, the thresholds that actually apply, and the three cases that catch people out — translucent panels, gradients and images.
Inspect the text and read the ratio. In Chrome DevTools, click the colour swatch next to color in the Styles panel — the picker shows the contrast ratio with the AA and AAA lines drawn on it. Normal text needs 4.5:1 to pass AA; large text needs 3:1. A design inspector gives you the same number by hovering, without opening a panel.
What the ratio actually measures
Contrast ratio compares the relative luminance of two colours — how much light each one reflects, weighted for how the eye responds to red, green and blue. It runs from 1:1 (identical) to 21:1 (pure black on pure white).
Two things follow from that, and both surprise people:
- Hue barely matters. Two colours can look completely different and still fail, because they reflect a similar amount of light. Mid-grey on mid-blue is the classic.
- It is not symmetrical in practice. White text on a mid colour and black text on the same colour give different ratios, which is why "just invert it" does not always help.
1. Read it off the element
The fastest route. An inspector that reports contrast hovers the text, works out what is really behind it, and gives you the ratio with its grade — so you are reading a result rather than doing arithmetic.
The part that matters is what it compares against. Design Toolkit walks up from the element until it finds something actually painted, composites any translucent layers on the way, and reports the ratio against that — along with whether the text counts as large, because that changes the threshold it has to clear.
2. Or use DevTools
Inspect the text
Right-click it and choose Inspect.
Open the colour swatch
In the Styles panel, click the small square next to the color value. The picker opens with the contrast ratio at the bottom.
Expand it
Click the ratio and the picker draws a line across the colour field: anything below it fails. Drag your colour above the line and you have a passing value without guessing.
DevTools also has a whole-page pass in Lighthouse, under Accessibility, which lists every failing element at once.
The thresholds, plainly
| What | AA | AAA |
|---|---|---|
| Normal text | 4.5:1 | 7:1 |
| Large text — 24px, or 18.66px bold | 3:1 | 4.5:1 |
| Interface components, icons, input borders | 3:1 | — |
| Disabled controls, decorative graphics | exempt | exempt |
The large-text rule is the one people get wrong most often. A 24px heading at 3.2:1 passes AA; the same colours on 16px body text fail. If a tool tells you a heading passes and the paragraph under it does not, nothing is broken — that is the rule working.
The three cases that catch people out
Translucent backgrounds
Text on a card with background: rgba(255, 255, 255, 0.06) is not on white and it is not on transparent. It is on that 6% white composited over whatever is behind the card. Any tool that reads the element's own background-color and stops there is measuring against the wrong colour, and will usually tell you things pass when they do not.
Text over images and gradients
There is no single background colour, so there is no honest single number. What works: sample the lightest and the darkest point the text actually crosses and check both. If either fails, add a scrim — a dark overlay at 40–60% between the image and the text is the standard fix and costs one line of CSS.
Hover and focus states
A link that passes at rest can fail on hover, and focus outlines have their own 3:1 requirement against the surface they sit on. Check the states, not just the resting colours — an inspector that reports what changes on hover saves you from forcing each state by hand.
What to do when something fails
- Darken or lighten, do not re-hue. Contrast follows luminance, so shifting the hue at the same lightness changes nothing.
- Check the whole scale at once. If your
--gray-400fails on your surface colour, it fails everywhere it is used. Fix the token, not the instance. - Do not chase AAA everywhere. AA is the level almost every law and contract asks for. AAA on body text often means a palette with no room left in it.
Read contrast without doing the maths
Hover any text for its colour, what is really behind it, the ratio and the grade — with hover and focus states too. Free for 7 days.
Add to Chrome — free trialCommon questions
What contrast ratio do I actually need?
4.5:1 for normal body text to meet AA, 7:1 for AAA. For large text — 24px and above, or 18.66px and above when bold — 3:1 and 4.5:1. Interface components such as input borders and icons need 3:1 against what is next to them.
Why do two tools give me different numbers?
Usually what they measured against. If the text sits on a translucent panel, the real background is that panel composited over what is behind it. A tool that takes the element's own background-color at face value reads transparent and compares against the wrong colour.
How do I check text on an image or a gradient?
There is no single background colour, so no tool can give one honest number. Sample the lightest and darkest points the text crosses and check both. If either fails: a scrim, a text shadow, or move the text to a calmer part of the image.
Does contrast matter for SEO?
Not as a direct ranking factor. It matters because it is a legal requirement in many places, because low contrast raises bounce rates on phones and in sunlight, and because it is often the first thing an auditor checks.