Contrast Checker
Enter a text and a background colour to see the WCAG 2.2 contrast ratio and where it passes — normal text, large text and UI components. Everything runs in your browser.
Large text — 24px bold
Normal body text at 16px. The quick brown fox jumps over the lazy dog.
- Normal text — AA needs 4.5:1
- —
- Normal text — AAA needs 7:1
- —
- Large text — AA needs 3:1 · ≥24px or ≥18.66px bold
- —
- Large text — AAA needs 4.5:1
- —
- UI components & graphics needs 3:1 · WCAG 1.4.11
- —
Large text is 24px (18.66px if bold) or larger — it can use a lower ratio because bigger glyphs are easier to read. UI components (icons, form borders, focus rings, chart lines) need at least 3:1 against their surroundings under WCAG 1.4.11.
Verifying contrast is step one of the accessibility checklist. See also colour contrast and accessibility in the glossary.
Next door: the colour blindness simulator — check whether your palette stays legible under colour vision deficiency.