Contrast Checker: Averaging RGB Will Not Tell You
How bright a colour looks is not the average of its RGB values. There is a bent relationship between the numbers and the light a screen emits, and skipping that correction throws the whole calculation off.
Text that does not contrast enough with its background is hard to read — especially for anyone with reduced vision, anyone looking at a phone in sunlight, and anyone on a cheap monitor. This is why the accessibility guidelines put a number on it.
This tool computes the ratio between two colours, from 1:1 up to 21:1, and shows which conformance levels that ratio clears.
50% grey emits nowhere near half the light of white
The counterintuitive fact at the centre of contrast maths: a grey with an RGB value of 128 is numerically half of white's 255, but the light your screen actually emits is around 21% of white, not 50%.
sRGB values are not proportional to light. Human vision is more sensitive to differences among dark tones, so the encoding spends more of its numeric range down there. That curve is called gamma.
To compute contrast you first have to undo it. Each channel is converted back to a share of emitted light, then weighted by how sensitive the eye is to that colour: 0.7152 for green, 0.2126 for red, 0.0722 for blue. Green dominates because that is where our vision is sharpest.
Leave the correction out and average the raw channels instead, and the answer diverges badly — most of all for saturated colours.
The WCAG thresholds
Large text means 18pt and up, or 14pt and up when bold.
| Level | Normal text | Large text | Typically required for |
|---|---|---|---|
| AA | 4.5:1 | 3:1 | The baseline most sites aim at |
| AAA | 7:1 | 4.5:1 | Government sites and accessibility-critical services |
Black text or white text?
There is a common shortcut for putting text on a coloured background: black if the background is light, white if it is dark. The question is where "light" begins.
Plenty of code splits at a brightness of 0.5. The real crossover between black and white sits at a luminance of about 0.179. Everything in between — the mid-bright colours — gets white text when black would have contrasted more.
You do not need to remember that number. Compute the contrast against black and against white and take the larger. That is what the colour tools on this site do.
Where this usually goes wrong in practice
- •Light grey body text — muted grey looks refined and frequently fails.
- •White text on a brand colour — yellow and lime brand palettes have almost no contrast with white.
- •Placeholder text in form fields, where the default grey rarely clears 4.5:1.
- •Text over photographs, where brightness varies across the image and a scrim is needed.
- •Disabled buttons — they are meant to look inactive, but they still have to be legible.
Extended FAQ
This disagrees with another contrast checker.
Most likely one of them skips the gamma decode. Calculations that average raw RGB diverge sharply on saturated colours. A quick test: black against white must come out as exactly 21:1.
Do I really have to clear 4.5:1?
Sometimes it is a legal requirement, for public-sector sites among others. Where it is not, it is still worth doing: contrast sensitivity declines with age, and bright daylight puts everyone in the same position.
Why is the bar lower for large text?
Larger type has thicker strokes and stays legible at lower contrast. The advantage shrinks for large text set in a thin weight.
How do I handle semi-transparent colours?
Measure what actually appears on screen. Work out the composited colour after the transparency has blended with what is behind it, and check that.
Are the colours I enter stored?
No. Everything is computed in your browser.