Color Contrast Checker - WCAG 2.1 Compliant
Enter foreground and background colors to calculate the WCAG 2.1 contrast ratio and get AA/AAA compliance results. Preview actual text appearance with your chosen colors.
| Normal Text | Large Text | |
|---|---|---|
| AA | Pass | Pass |
| AAA | Pass | Pass |
The quick brown fox jumps over the lazy dog
Large text preview
What is Contrast Checker?
Contrast Checker calculates and evaluates the contrast ratio between foreground and background colors according to WCAG 2.1 (Web Content Accessibility Guidelines) standards. It helps ensure text and background color combinations have sufficient contrast for accessibility.
See also: Color Code Converter · Palette Generator
How to Use
- Select the foreground (text) color using the color picker or HEX input
- Select the background color using the color picker or HEX input
- Check the contrast ratio and WCAG AA/AAA results
- Preview the actual text appearance
FAQ
- What is the difference between WCAG AA and AAA?
- AA is the minimum standard (4.5:1 for normal text, 3:1 for large text), AAA is enhanced (7:1 for normal text, 4.5:1 for large text).
- What qualifies as large text?
- Text 18px or larger, or bold text 14px or larger is considered large text.
- How do I use this tool?
- Simply enter the foreground (text) color and background color via the color picker or HEX input. The contrast ratio and WCAG AA/AAA results are shown instantly.
- Is my data sent to a server?
- No. All processing happens in your browser; no data is sent to any server.
- What should I do if the contrast ratio fails?
- Try darkening the text color or lightening the background (or vice versa), or increase the text size to more easily meet the large text threshold.
Related Tools
Update History
Last Updated: 2026-02-20
- 2026-02-20 Initial release