Color Contrast Checker
Check WCAG color contrast ratio between text and background colors.
Large text preview
Normal text preview looks like this.
About Color Contrast Checker
Check whether your text and background color combination meets WCAG 2.1 accessibility contrast requirements. AA is the minimum recommended standard; AAA is the enhanced standard for better readability.
What Is This Tool?
Check whether a foreground (text) and background color combination meets WCAG 2.1 accessibility contrast standards. Get an instant contrast ratio and pass/fail results for AA and AAA compliance levels.
How to Use
- Pick or type a hex value for the foreground (text) color.
- Pick or type a hex value for the background color.
- Review the live preview and the pass/fail results for each WCAG level.
Common Use Cases
- Verifying text and background color choices meet accessibility guidelines before shipping a design
- Choosing readable color combinations for buttons, links, and body text
- Auditing an existing website or app for accessibility compliance
Tips & Tricks
- AA (4.5:1) is the minimum standard most websites should meet for normal text.
- Large text (18pt+, or 14pt+ bold) has a lower required ratio since it's easier to read at lower contrast.
Frequently Asked Questions
What's the difference between WCAG AA and AAA compliance?
AA is the minimum standard most websites should meet, requiring a 4.5:1 contrast ratio for normal text. AAA is a stricter standard requiring 7:1, intended for content where maximum readability is critical.
Why does large text have a lower required contrast ratio?
Larger text (18pt+ regular, or 14pt+ bold) is inherently easier to read at lower contrast, so WCAG sets a reduced minimum ratio of 3:1 for AA compliance on large text compared to 4.5:1 for normal text.
How is the contrast ratio actually calculated?
It's based on the relative luminance of both colors, calculated per the WCAG formula, and expressed as a ratio from 1:1 (no contrast, identical colors) up to 21:1 (maximum contrast, black on white).
What if my color combination fails the contrast check?
Try darkening the text color, lightening the background, or increasing the text size to fall under the large-text threshold, which has a lower required ratio.
Are the colors I test sent anywhere?
No. The contrast ratio is calculated entirely in your browser using standard WCAG formulas — no color data is transmitted or stored.
Check WCAG color contrast ratio between text and background colors. Verify AA/AAA accessibility compliance instantly, free and online.