Contrast Checker

Features

• Contrast ratio to two decimal places
• AA and AAA verdicts for normal, large and UI elements
• Live preview at three text sizes
• Suggested nearest passing colours when a pair fails
• Hex entry as well as colour pickers

How to use it

1. Set your text and background colours.
2. Read the ratio and the pass or fail verdicts.
3. Check the preview at the size you will actually use.
4. If it fails, click a suggested colour to apply it.

Reading the WCAG thresholds

WCAG 2.1 sets three thresholds. Normal body text needs 4.5:1 for AA and 7:1 for AAA. Large text, defined as 18pt regular or 14pt bold, roughly 24px and 18.66px, gets a lower bar of 3:1 for AA and 4.5:1 for AAA, because larger glyphs have thicker strokes and are easier to read at lower contrast. Non-text elements such as form borders, icons and focus indicators need 3:1 under criterion 1.4.11.

The formula compares relative luminance, which weights the colour channels by human sensitivity: green contributes about 72%, red 21% and blue 7%. That is why blue text on black fails badly even when it looks distinct, blue contributes almost nothing to perceived luminance. It also means the ratio is symmetrical, so swapping foreground and background does not change it.

Two things the ratio does not capture. It says nothing about colour blindness, red and green can have identical luminance and pass easily while being indistinguishable to roughly 8% of men. Never rely on colour alone to convey meaning. And WCAG 2's formula is known to be imperfect, particularly for dark themes where it can be overly permissive; APCA, developed for WCAG 3, models perception more accurately but is not yet a formal standard. Meeting 4.5:1 remains the defensible legal baseline today.