About the Color Contrast Checker
Readable text needs enough contrast against its background, and the Web Content Accessibility Guidelines set the thresholds: 4.5:1 for normal text and 3:1 for large text at AA, rising to 7:1 and 4.5:1 at AAA. This tool computes the contrast ratio between a foreground colour (in the pane) and a background (in the toolbar), shows a preview of text on that background, and reports pass or fail for each level.
Getting contrast right is one of the most common and most impactful accessibility fixes, and it also just makes interfaces easier to read for everyone. The ratio uses the WCAG relative-luminance formula. Any colour format is accepted for either value.
To explore all of a colour's values, use the Color Converter, which also shows contrast against black and white; to find accessible variants, the Shades Generator.
How to use
- Enter the text colour in the pane.
- Enter the background colour in the toolbar.
- Read the ratio and the AA/AAA pass or fail.
Common questions
- What ratio do I need?
- WCAG AA needs 4.5:1 for normal text and 3:1 for large text (18px bold or 24px). AAA needs 7:1 and 4.5:1.
- What counts as large text?
- Roughly 18.66px bold or 24px regular and above, which is allowed a lower ratio.
- Does it check UI components?
- The 3:1 line covers large text and UI component boundaries, which share that threshold.