What contrast ratio do I need?

For normal text the minimum is 4.5 to meet WCAG AA, and 7 for AAA. Large text — from 18.66 pixels bold or 24 pixels regular — needs only 3 for AA and 4.5 for AAA, while interface elements such as input borders need 3.

Why does yellow text on white fail when the colours look different?

Because contrast is measured by brightness, not by difference in hue. Yellow and white are both very bright, so the ratio is low even though the colours plainly differ. A difference in hue does not help readers who struggle to distinguish colours, and that is what the guideline measures.

Do the rules apply to logos and decorative images?

No — logos and purely decorative text are exempt from the WCAG contrast thresholds. That exemption does not extend to text carrying information, including text inside a banner image that conveys something important.

Is AA enough, or should I aim for AAA?

AA is the expected baseline for public sites and a legal requirement for some organisations in several countries. AAA is rarely mandated across the board, but it is worth reaching for in long body text, where the reading load is heaviest.

Color

Color Contrast Checker

Pick a text and background colour to see their contrast ratio and the pass status at each WCAG level.

Text colour

Background colour

—

Normal text at 16 pixels, for legibility.

Large text at 24 pixels

AA — normal text ≥ 4.5 —

AA — large text ≥ 3 —

AAA — normal text ≥ 7 —

AAA — large text ≥ 4.5 —

Interface elements ≥ 3 —

What this is

A colour contrast checker measures how far apart a text colour and its background are in perceived brightness, then compares that against the thresholds in the WCAG accessibility guidelines. The result is a ratio between 1 and 21, where 1 means the two colours are identical and 21 is black on white. The threshold to clear depends on text size: small text needs more contrast than large text, because its letterforms are thinner and harder to separate from the background.

The formula

ratio = (L1 + 0.05) ÷ (L2 + 0.05)

L1 — relative luminance of the lighter colour; L2 — of the darker.
Luminance = 0.2126·R + 0.7152·G + 0.0722·B, after each channel is linearised.
Thresholds: 4.5 for AA normal text · 3 for AA large text · 7 for AAA.

How it works

The ratio comes from relative luminance, not from the distance between hex values. Each channel is linearised first, then weighted by how sensitive the eye is to it — green counts most, blue least. That is why yellow text on white fails despite hex values that look far apart, while dark blue on grey can pass.

Text counts as large from 18.66 pixels when bold, or 24 pixels at normal weight. Below that the normal-text thresholds apply: 4.5 for AA and 7 for AAA. Interface elements such as input borders and icons have their own threshold of 3, because they are larger shapes and are not read as letterforms.

Meeting AA is the expected baseline for a public site, and in several jurisdictions it is a legal requirement for certain organisations. AAA is rarely demanded across a whole page, but it is worth aiming at for long body text, since that is where readers spend the most time.

How to use it

Pick two colours Enter a text colour and a background colour, by picker or by hex code.
Read the ratio and its status Each WCAG level is marked pass or fail, separately for normal and large text.
Fix it with the auto-adjust If it fails, the adjust button darkens or lightens the text colour until the threshold is cleared.

Common questions

What contrast ratio do I need?: For normal text the minimum is 4.5 to meet WCAG AA, and 7 for AAA. Large text — from 18.66 pixels bold or 24 pixels regular — needs only 3 for AA and 4.5 for AAA, while interface elements such as input borders need 3.
Why does yellow text on white fail when the colours look different?: Because contrast is measured by brightness, not by difference in hue. Yellow and white are both very bright, so the ratio is low even though the colours plainly differ. A difference in hue does not help readers who struggle to distinguish colours, and that is what the guideline measures.
Do the rules apply to logos and decorative images?: No — logos and purely decorative text are exempt from the WCAG contrast thresholds. That exemption does not extend to text carrying information, including text inside a banner image that conveys something important.
Is AA enough, or should I aim for AAA?: AA is the expected baseline for public sites and a legal requirement for some organisations in several countries. AAA is rarely mandated across the board, but it is worth reaching for in long body text, where the reading load is heaviest.

Notes

The calculation follows WCAG 2 and runs entirely in your browser.