Pick a text colour and a background colour and see the contrast ratio, whether it passes WCAG AA and AAA for normal and large text, and a live sample.
Files never leave your device
Contrast ratio
4.48:1
AA · Normal textFail
AAA · Normal textFail
AA · Large textPass
AAA · Large textFail
The quick brown fox jumps over the lazy dog.
The quick brown fox
What the ratio actually measures
Contrast ratio compares the relative luminance of two colours — a brightness value computed from
the sRGB channels through a formula that mimics how the eye responds to light, not a straight
average of the RGB numbers. The result is always at least 1:1, when both colours are identical,
and at most 21:1, black against white. Everything real falls somewhere between, and the order of
the two colours doesn't matter — text on background or background on text gives the same ratio,
which is what makes the Swap control above safe to use without changing the number.
The two thresholds
WCAG defines two pass levels, and each one has a separate bar for normal and large text:
Level
Normal text
Large text
AA (minimum)
4.5:1
3:1
AAA (enhanced)
7:1
4.5:1
Most accessibility audits check against AA; AAA is a stricter bar some products commit to for body
copy, but it's demanding enough that many real designs pass AA comfortably while missing AAA.
A pair right on the line
#777777 on white comes out to 4.48:1 — just under AA's 4.5:1, so it fails for normal text, even
though it passes the 3:1 large-text bar. #767676 on white, one digit of grey darker, comes out to
4.54:1 and passes normal-text AA. The two greys look almost indistinguishable side by side; only
the ratio tells you one is compliant and the other isn't.
Tip:A colour failing by 0.02 is not a colour to leave alone "because it's close enough." Nudge lightness down a couple of percent in HSL and recheck — that's usually all it takes to clear 4.5:1 without a visibly different colour.
What counts as "large" text
The 3:1 large-text threshold applies to 18 point regular text (24px in most browsers) or 14 point
bold text (about 18.66px) or larger — a definition about point size and weight, set by the spec,
not a judgment call about what looks big on your screen. #1e90ff on white is 3.24:1: it fails
the 4.5:1 normal-text bar but clears 3:1, so that blue is a legitimate choice for a large heading
and a bad choice for a paragraph of body copy in the same colour.
Tip:Bold, small text does not qualify as "large" on its own — it has to be 14 point (about 18.66px) or bigger and bold together. A 13px bold label still needs to clear the 4.5:1 normal-text bar.
Why the ratio isn't perceived difference
Luminance is computed with a gamma curve, not a straight line, so the ratio compresses at the
bright end and stretches at the dark end. #ffd700 — a saturated gold — looks bold and eye-catching
on a page, but against white it measures only 1.40:1, because yellow is naturally close to white
in luminance regardless of how saturated it looks. Compare that with #008000, a plain green,
which reaches 5.14:1 against white — well past AA — despite reading as a calmer, less "loud"
colour. Saturation and vividness are not what the ratio measures; luminance distance is, and the
two can point in different directions.
Text colour
On white
Ratio
AA normal
AA large
#000000
white
21.00:1
Pass
Pass
#595959
white
7.00:1
Pass
Pass
#767676
white
4.54:1
Pass
Pass
#777777
white
4.48:1
Fail
Pass
#1e90ff
white
3.24:1
Fail
Pass
#ffd700
white
1.40:1
Fail
Fail
Frequently asked questions
What does a contrast ratio actually measure?
How different two colours' relative luminance is — a measure of perceived brightness derived from the sRGB channels, not the raw RGB numbers. Ratios range from 1:1 (identical colours, no contrast at all) to 21:1 (pure black against pure white, the maximum possible on a screen).
What's the difference between the 4.5:1 and 3:1 thresholds?
4.5:1 is WCAG AA's minimum for normal-sized text; 3:1 is AA's minimum for large text, which is easier to read at a lower contrast because bigger glyphs have thicker strokes. AAA raises both bars, to 7:1 for normal text and 4.5:1 for large text.
What officially counts as 'large text' for the 3:1 threshold?
18 point regular weight (24px in most browsers) or 14 point bold (about 18.66px) or larger. Anything smaller than that, even if it looks big on a high-resolution display, is judged against the stricter normal-text thresholds — the definition is about point size and weight, not how the text happens to render.
Why does #777777 fail against white but #767676 pass?
Because the two colours sit on opposite sides of 4.5:1 by a hair — #777777 on white is 4.48:1, and #767676 on white is 4.54:1. One digit of grey moved the ratio just enough to cross the line, which is exactly why a checker matters more than eyeballing two colours that look nearly identical.
If a ratio comfortably passes AA, is it automatically easy to read?
Usually, but the ratio is a floor, not a full readability score. It says nothing about font weight, letter spacing, line length or the specific hues involved — two pairs at the same ratio can feel different to read, so treat a pass as the minimum bar, not proof the text is comfortable.
Does a higher ratio always look like 'more contrast' to the eye?
Not proportionally. Relative luminance is a nonlinear transform of the raw channel values, so going from a 4:1 ratio to an 8:1 ratio doesn't look twice as different — the scale compresses at the bright end and stretches at the dark end, which is part of why two pairs that look similarly readable can have noticeably different ratios.
What happens if my background colour has transparency?
The ratio is calculated as if the colour were fully opaque, because WCAG contrast is defined for what actually renders on screen — which depends on whatever sits behind a translucent layer. Flatten the colour against its real background before checking if you need an accurate number.