What it checks
- Normal text: 4.5:1 for WCAG AA, 7:1 for AAA.
- Large text (24 pixels, or 19 pixels bold, and up): 3:1 for AA, 4.5:1 for AAA.
- User interface parts such as buttons, icons and form field borders: 3:1.
- APCA: the lightness contrast (Lc) planned for WCAG 3.
Fixes keep the hue and saturation of your color and move only its lightness to the nearest value that passes, for the text and the background, at AA and AAA. Color Vision shows the pair through eight color vision deficiencies with the ratio each one keeps. The two colors live in the link, so a result can be shared.
How it works
Two colors in, the WCAG contrast ratio out, with the closest colors that pass when they do not
The checker measures the contrast ratio of WCAG 2: the relative luminance of the lighter color plus 0.05, divided by that of the darker one plus 0.05. It runs from 1:1, the same color twice, to 21:1, black on white. Normal text needs 4.5:1 for level AA and 7:1 for AAA; large text, 24 pixels or 19 pixels bold and up, needs 3:1 and 4.5:1; buttons, icons and the borders of form fields need 3:1. The APCA value beside it is the newer model planned for WCAG 3, where the order of the two colors matters.
When a pair fails, Fixes keeps the hue and the saturation of your color and moves only its lightness to the nearest value that passes, for the text and for the background, at AA and at AAA. Color Vision shows the pair through eight color vision deficiencies with the ratio each one keeps. Everything is computed in your browser; explore a single color in full in the Color Explorer.
Questions
- What contrast ratio do I need for text?
- WCAG 2 level AA asks for 4.5:1 for normal text and 3:1 for large text (24 pixels, or 19 pixels bold, and up). Level AAA asks for 7:1 and 4.5:1. Most accessibility rules and laws refer to level AA.
- Do buttons and icons need contrast too?
- Yes. WCAG 2.1 asks for 3:1 between user interface parts, such as button borders, form field borders, focus rings and icons, and the colors next to them.
- What is APCA?
- APCA, the Accessible Perceptual Contrast Algorithm, is the contrast model planned for WCAG 3. It gives a lightness contrast value (Lc) that depends on which color is the text and which is the background. Lc 75 suits body text, 60 large text and 45 headlines.
- Can I share a result?
- Yes. The two colors live in the address bar, so the link opens the checker on the same pair, with its ratio, checks and fixes.
