Colour contrast checker
Perceptual difference ΔE 68.5 — clearly different colours
Calculated in your browser · nothing is uploaded
Calculates the WCAG contrast ratio between two colours and shows which conformance levels the pair passes: 4.5:1 for normal text at AA, 3:1 for large text and interface components, 7:1 for normal text at AAA and 4.5:1 for large text at AAA. The sample block above the reading shows the pair at a heading size and a body size, and the perceptual difference between the two colours is printed underneath as a ΔE, because the ratio says nothing about whether they look alike.
How to use the colour contrast checker
The ratio is computed from relative luminance, not from how different the colours look, which is why a mid-grey on white and a mid-blue on white can score identically while looking nothing alike. Large text gets a lower threshold because size compensates for contrast, and "large" has a specific meaning: 18.66px bold or 24px regular, not merely bigger than the body copy. Two things the ratio does not cover: it says nothing about colour-blind users distinguishing two colours from each other, and WCAG 2 contrast is known to under-serve some combinations, which is why APCA exists as a proposed replacement. The other measure people reach for is ΔE, which answers a different question. Not "is this readable" but "will anyone notice these are different colours". It is measured in CIE Lab, a space built so that equal numeric distances look like equal differences, because RGB distance does not: it treats a change in blue as being as visible as the same change in green, and human vision is far more sensitive to green. The thresholds worth remembering are that ΔE under 1 is imperceptible, 1 to 2 shows only on close inspection, 2 to 10 is visible at a glance, and print buyers commonly accept under 2 for a brand colour match. Luminance and ΔE disagree constantly, and a pair can pass AAA while being nearly indistinguishable to someone with a colour vision deficiency.
What people use it for
- Checking body text against its background before shipping
- Confirming a button label passes AA at the size it is set
- Testing whether a large heading clears the 3:1 threshold
- Checking an icon or a border against the 3:1 component rule
- Working out why a pair passes AA but fails AAA
- Deciding between two greys for secondary text
- Measuring how far a printed or converted colour has drifted from the original
- Settling whether two near-identical colours are worth keeping apart at all
Questions
4.5:1 for normal text at AA, 3:1 for large text and interface components, 7:1 for normal text at AAA, and 4.5:1 for large text at AAA — which is the fourth badge, and why a pair can show AAA large while failing AAA text.
18.66px bold or 24px regular. Merely larger than your body copy does not qualify.
No. Contrast is about luminance. Two colours can have great contrast and be indistinguishable to someone with a colour vision deficiency.
Yes; 3:1 for interface components and meaningful graphics under WCAG 2.1.
Only through the large-text threshold. 18.66px bold drops the requirement from 4.5:1 to 3:1; below that, weight makes no difference to the number.
Yes, measured against the part of the image the text actually sits on. A scrim or a solid backing behind the text is the usual fix.
No. WCAG exempts inactive components, though anything a reader must understand to know the state still needs to be legible.
A weighted, gamma-corrected sum of the three channels that models how bright a colour appears on screen. It is why the formula ignores hue entirely.
Because the ratio is luminance only. Perceptual distance is ΔE, which is the second reading here: a pair can clear AAA and still sit under 2, meaning almost nobody would call them two colours.
The threshold of perceptibility. Under 1 the human eye cannot tell the two colours apart.
CIE76, the straight-line distance between the two colours in Lab. It is simple and adequate for a verdict. CIEDE2000 is more accurate, mostly in saturated blues, where CIE76 overstates the difference.
RGB distance does not match perception. It treats a change in blue as equal to a change in green, and your eye does not.
Commonly under 2 for a brand colour match, which is around the limit of what a client notices side by side.
A proposed replacement contrast algorithm that models perception better than the WCAG 2 formula. Not yet the standard.