Contrast Checker (WCAG)
Pick a text color and a background color to see the contrast between them and whether they meet WCAG AA and AAA levels.
Large sample text
This is a normal sample text to evaluate readability.
AA: pass
AAA: pass
AA: pass
AAA: pass
Not sure? Turn your internet off and try — it still works.
How it works
Contrast is calculated following the official WCAG 2.x formula, from each color's relative luminance. The result is a ratio from 1:1 (no contrast at all) to 21:1 (black on white, the maximum). Accessibility guidelines require different minimum contrasts for normal text and large text (18pt and up, or 14pt bold), and define two compliance levels: AA (recommended minimum) and AAA (stricter). To get a feel for the numbers: black on white is 21:1; the gray #767676 on white is about 4.5:1 (the lightest gray that still passes AA for normal text); and a light gray #999999 on white is only 2.85:1, below the minimum. If the tool reports a fail, darken the text (or lighten the background) until the ratio goes up. The same calculation applies to icons and form-field borders: WCAG 2.1 asks for 3:1 for interface components and graphics needed to understand the content.