Color Contrast Checker

If visitors cannot read your text, nothing else about the design matters. Contrast ratio — the measured difference in luminance between text and its background — is the accessibility standard that decides, and WCAG sets the bars: 4.5:1 for normal text at level AA, 7:1 at AAA, with slightly lower thresholds for large text. This checker computes the ratio for any foreground/background pair, shows a live sample of the combination, and gives a plain pass/fail verdict for each level and text size. Designers use it when choosing brand colours, developers when auditing a site, and everyone should use it before shipping light-grey text on a white background because it ‘looked clean’.

Quick Answer: Pick a text colour and a background colour to get their WCAG contrast ratio and AA/AAA pass verdicts for normal and large text.

Free Online Tool

Beautiful is optional. Readable is not.

Text colour

Background colour

The quick brown fox jumps over the lazy dog

Smaller body text in the same colours — this is the size the strict rules protect.

—Contrast ratio

—AA normal (4.5)

—AA large (3.0)

—AAA normal (7.0)

How to Use the Color Contrast Checker

Enter or pick the text (foreground) colour.
Enter or pick the background colour it sits on.
Read the ratio and the four verdicts: AA and AAA, for normal and large text.
If a pair fails, nudge the text colour darker (or the background lighter) until it passes — the live sample shows the effect.
Record the passing pair in your design system so it is never re-litigated.

Key Features

Accurate WCAG 2.1 contrast ratio calculation.
Pass/fail for AA and AAA at normal and large text sizes.
Live sample preview in the chosen colours.
One-click swap of foreground and background.
Runs locally — audit client palettes before launch, privately.

Best Practices and Tips

Light grey body text on white is the most-shipped accessibility failure on the web — check yours, it takes ten seconds.
Large text means at least 18pt (or 14pt bold) — headings get the relaxed 3:1 AA bar; body copy does not.
Brand colours that fail on white often pass on a dark background, and vice versa — test both directions before redesigning a palette.
Do not rely on colour alone for errors and links; contrast is necessary but not the whole of accessible design.
When a pair narrowly fails, small nudges work: a few points darker on the text usually crosses the line without changing the design’s feel.

Common Mistakes to Avoid

Eyeballing contrast (‘looks fine to me’) instead of measuring — human judgement is notoriously optimistic, especially on bright monitors.
Testing text over a gradient or photo using the average colour; the worst-case point behind the text is what matters.
Forgetting hover and disabled states, which are classic hiding places for unreadable low-contrast text.
Assuming a passing ratio makes small thin text fine — weight and size still decide real-world readability.

Frequently Asked Questions

What ratio do I actually need?

For WCAG AA — the level most laws and procurement standards reference — normal text needs 4.5:1 and large text 3:1. AAA is stricter (7:1 and 4.5:1) and is a worthy aim for body text on content-heavy sites, though not every brand colour can reach it on white.

How is the ratio calculated?

From the relative luminance of the two colours: each RGB channel is linearised (undoing gamma), weighted (green contributes most, blue least), and the lighter luminance plus 0.05 is divided by the darker plus 0.05. The result runs from 1:1 (identical) to 21:1 (black on white).

What counts as large text?

At least 18 point (24px) regular text, or 14 point (about 18.5px) bold text. Display headings qualify; 16px body copy, however bold it feels, counts as normal text and needs the full 4.5:1.

My brand colour fails on white — what are my options?

Use it for large headings (lower bar), darken it a shade for text use while keeping the bright version for graphics and backgrounds, or put the bright colour behind dark text instead of using it as the text. Most brands keep a ‘text-safe’ variant of each brand colour for exactly this reason.

Does this cover WCAG 2.2 as well?

The contrast thresholds did not change between WCAG 2.0, 2.1 and 2.2 — the same ratios and levels apply, so a pass here is a pass under all three versions’ text-contrast criteria.