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.

12.63:1
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.

How to Use

  1. Select the foreground (text) color using the color picker or HEX input
  2. Select the background color using the color picker or HEX input
  3. Check the contrast ratio and WCAG AA/AAA results
  4. 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