What ratio do I actually need?

For body text under AA, 4.5:1. Large text (24px, or 18.66px bold) needs 3:1. AAA raises those to 7:1 and 4.5:1. Non-text items such as input borders and icons are held to 3:1 under WCAG 2.1 SC 1.4.11.

Why does my grey fail by a hair?

Because the threshold is a hard inequality on the unrounded ratio. 4.48 is not 4.5. Nudge the darker channel down one or two steps until the displayed value clears with margin, rather than arguing about rounding.

Does black-on-white always pass?

The ratio is 21:1, which passes every threshold. What fails in practice is the middle of the range: light greys on white, muted brand colours, and white text on a mid-tone background.

What about colours with opacity?

Treat them as the solid colour they composite to. Alpha in the input is ignored on purpose — averaging two luminances while the browser blends against whatever is behind them produces a number that is not a WCAG result.

Is a passing ratio accessible?

It satisfies one requirement. Legibility also depends on font size, weight, letter spacing, and how long the text stays on screen; and colour must never be the only carrier of meaning, which this tool does not judge.

Does my colour pair leave this page?

No. Both values are computed locally, and the only thing remembered is your last two colours in this browser.

Color Contrast Checker — Guide

Check the contrast ratio between two colours against WCAG 2.x AA and AAA thresholds for normal and large text, with a live text preview.

What it is and when to use it

Contrast here is not an opinion about legibility but a defined quantity: each sRGB channel is linearised, combined into a relative luminance with weights 0.2126 / 0.7152 / 0.0722, and the two luminances are compared as (lighter + 0.05) / (darker + 0.05). WCAG 2.x sets the passing lines at 4.5:1 for normal text under AA, 3:1 for large text, 7:1 and 4.5:1 for the equivalent AAA levels. Two colours one byte apart can straddle a threshold — #767676 on white is 4.54:1 and passes AA, while #777777 is 4.48:1 and does not — which is exactly why eyeballing a swatch is not a review.

Computes the WCAG 2.x contrast ratio between a text colour and its background, then reports whether it passes AA and AAA for normal and large text, with live previews at both sizes.

How to use it

Enter the text colour as #rgb, #rrggbb or rgb(r,g,b)
Enter the background colour it will actually sit on
Read the ratio and the four threshold rows — the preview shows the real thing at 16px and 24px bold
Use Swap colours to check the reverse pair, which always gives the same ratio

A worked example

Fill in a near-miss grey

#777777

Copy this into the tool, or open Color Contrast Checker

Things that trip people up

Large text means at least 24px, or 18.66px bold — the looser 3:1 threshold applies only at those sizes
Alpha is ignored: the calculation assumes the colours are opaque, so a translucent overlay must be flattened to a solid colour first
The verdict compares the unrounded ratio against 4.5 / 3 / 7; the displayed number is rounded to two decimals, which is why a 4.4996 pair fails AA even though it reads 4.50

Questions people ask

What ratio do I actually need?: For body text under AA, 4.5:1. Large text (24px, or 18.66px bold) needs 3:1. AAA raises those to 7:1 and 4.5:1. Non-text items such as input borders and icons are held to 3:1 under WCAG 2.1 SC 1.4.11.
Why does my grey fail by a hair?: Because the threshold is a hard inequality on the unrounded ratio. 4.48 is not 4.5. Nudge the darker channel down one or two steps until the displayed value clears with margin, rather than arguing about rounding.
Does black-on-white always pass?: The ratio is 21:1, which passes every threshold. What fails in practice is the middle of the range: light greys on white, muted brand colours, and white text on a mid-tone background.
What about colours with opacity?: Treat them as the solid colour they composite to. Alpha in the input is ignored on purpose — averaging two luminances while the browser blends against whatever is behind them produces a number that is not a WCAG result.
Is a passing ratio accessible?: It satisfies one requirement. Legibility also depends on font size, weight, letter spacing, and how long the text stays on screen; and colour must never be the only carrier of meaning, which this tool does not judge.
Does my colour pair leave this page?: No. Both values are computed locally, and the only thing remembered is your last two colours in this browser.

Next steps

Open the Color Contrast Checker tool

Spotted something wrong on this page? Tell us via Contact Us