WCAG color contrast checker.
Enter hex text and background colors, preview the combination, and see WCAG 2.x contrast ratio and AA/AAA results.
Check text against a background using the WCAG 2.x contrast-ratio formula, with pass/fail results for common text sizes.
This is a preview of normal-sized body copy. Check how the text feels against your chosen background.
Large text preview — Aa 123WCAG AA generally requires 4.5:1 for normal text or 3:1 for large text; AAA has stricter thresholds. Contrast is one part of accessible design, not a complete accessibility audit.
How to use this tool
- Enter a text color and a background hex color, or use the color pickers.
- Review the live sample and numeric contrast ratio.
- Check whether the combination meets WCAG AA or AAA for normal and large text; adjust colors and retest.
Good to know
WCAG 2.x normally requires at least 4.5:1 for regular text and 3:1 for large text at AA. This tool checks the numeric ratio only; size, typography, focus and other accessibility criteria still need review.
This utility processes its content locally in your browser. No usage counter is required while public tools are free and unlimited. As with any online tool, avoid entering sensitive information on devices you do not trust.
What a contrast ratio tells you
Contrast measures the difference in relative luminance between two colors. White text on white has a ratio of 1:1, which is unreadable. Black on white is 21:1. A ratio closer to 21 generally means more luminance contrast.
WCAG 2.x AA sets 4.5:1 as the normal-text minimum and 3:1 for large text. AAA calls for 7:1 and 4.5:1 respectively. Large text has a defined size and weight, not simply whatever looks big to you.
Try the actual interface colors
Test the real text and background combinations you use: buttons, navigation labels, card descriptions, tool tips and form instructions. Testing a palette swatch in isolation does not tell you whether the final interface remains readable on an image or gradient.
The preview lets you look at normal copy and a larger headline together. The pass/fail labels are based on the precise contrast calculation, not a ratio rounded for display.
Passing contrast is only one accessibility check
Readable interfaces also need clear labels, visible keyboard focus, sufficient click targets, meaningful error messages and layouts that remain usable when text is enlarged. A passing ratio cannot certify an entire website.
For color on large illustrations and logos the applicable criteria differ. Use official W3C guidance when evaluating a particular design and its text size.
Questions about wcag color contrast checker
What is a good contrast ratio for normal text?
WCAG AA requires at least 4.5:1 for normal text. AAA requires at least 7:1. Other exceptions and criteria exist for particular content.
Why can a ratio pass for large text but fail for normal text?
The AA threshold is 3:1 for large text versus 4.5:1 for normal text. Large type has a separate minimum size/weight definition.
Does this checker make my whole site WCAG compliant?
No. It tests the contrast of two supplied colors. Accessibility includes many additional design, content and interaction requirements.