Normal text
AA ≥ 4.5:1
AAA ≥ 7:1
WCAG Contrast Checker
Check text and interface colour contrast against WCAG AA and AAA thresholds.
Contrast calculations run entirely in your browser.
1.00:1—
Large text
AA ≥ 3:1
AAA ≥ 4.5:1
UI components
AA ≥ 3:1
For controls and meaningful graphics.
This is normal body text at 16 pixels.
This is large text at 24 pixels.
How contrast ratio works
WCAG contrast ranges from 1:1 for identical colours to 21:1 for black and white. The calculation converts sRGB channels to relative luminance, then compares the lighter and darker values.
WCAG thresholds
Normal text needs 4.5:1 for AA and 7:1 for AAA. Large text—at least 24px regular or about 18.7px bold—needs 3:1 for AA and 4.5:1 for AAA. Meaningful UI components and graphics need 3:1.
FAQ
Does passing guarantee accessibility?
No. Contrast is one requirement; typography, focus states, semantics and interaction also matter.