Contrast checker for WCAG 2.2.
Enter a text color and a background color to see their contrast ratio and whether they pass WCAG 2.2 AA and AAA. It runs in your browser, and nothing you enter is uploaded.
Contrast ratio
13.79:1
- Normal text AA · 4.5:1Pass
- Large text AA · 3:1Pass
- Normal text AAA · 7:1Pass
- Large text AAA · 4.5:1Pass
- Icons and UI parts AA · 3:1Pass
Runs in your browser. Nothing you add here is uploaded or stored.
How to check color contrast
- Enter the text color as a HEX code, such as
#1F2A22or#333, or pick it from the swatch. - Enter the background color the same way. The swap button between the two fields switches them.
- Read the result. The ratio updates as you type, the sample shows your colors at 24px and at 15px, and each WCAG level shows Pass or Fail.
The fields take three- or six-digit HEX codes, with or without the #. For a semi-transparent color, enter the solid color it makes on your background. The ratio is rounded down, so a pair that shows 4.50:1 really does pass.
WCAG 2.2 contrast requirements
| What | AA | AAA |
|---|---|---|
| Normal text | 4.5:1 | 7:1 |
| Large text (24px, or 18.66px bold) | 3:1 | 4.5:1 |
| Icons and UI parts | 3:1 | None |
The text levels are success criteria 1.4.3 (AA) and 1.4.6 (AAA). Icons, input borders, focus indicators and other parts of controls fall under 1.4.11, which has an AA level only. Logos and the text of disabled controls are exempt. Ratios run from 1:1 (no contrast) to 21:1 (black on white), calculated with the WCAG 2 relative luminance formula.
Build an accessible design system with Codex
Checking one pair at a time works while you choose colors. To keep a whole product readable, check the pairs your design system depends on, then make the rule part of what Codex follows:
- Check the core pairs: text on the page background, text on cards, button text on your main color, and the muted gray you use for secondary text, which is the pair that fails most often.
- Write the rule into DESIGN.md. The DESIGN.md generator warns you when on-primary on primary, or on-surface on surface or neutral, falls below 4.5:1, and adds “Do keep text contrast at WCAG AA (4.5:1) or better” to the file.
- Lint the file.
npx @google/design.md lint DESIGN.mdalso checks contrast ratios, as the DESIGN.md guide explains. - Ask Codex to audit finished screens, where new pairs appear: text on images, badges and placeholder text.
Check every text and background color pair in [screen.html] against WCAG 2.2 AA: 4.5:1 for normal text, 3:1 for text at 24px or larger (or 18.66px bold), and 3:1 for icons, input borders and focus rings. List each pair that fails with its ratio, and suggest the closest color that passes while keeping the hue. Use only colors from DESIGN.md, or tell me which token needs to change.
Frequently asked questions
What is a good contrast ratio?
At least 4.5:1 for normal text and 3:1 for large text, icons and the parts of controls. That is WCAG AA, the level most accessibility policies require. Normal text at 7:1 or more meets AAA, and 21:1 is the highest possible.
What counts as large text?
Text at 24px (18pt) or larger, or at 18.66px (14pt) or larger when it’s bold.
Does it use APCA?
No. It uses the WCAG 2 contrast formula, the one WCAG 2.2 conformance is measured with. APCA, a different method discussed for a future WCAG 3, isn’t part of WCAG 2.2.
Is it free?
Yes. It’s free, needs no sign-up, and the colors you enter stay in your browser.
Keep reading
- Color palette from imageGet the main colors of any image as HEX codes, ready to copy.
- DESIGN.md generatorTurn your colors, fonts and spacing into a DESIGN.md for Codex.
- DESIGN.md for CodexThe DESIGN.md format, a complete example, and how to make Codex follow it.
- The best Codex skills for UI designSkills that give Codex taste, and how to write one for your own design system.