Color Contrast Checker

Check WCAG 2.1 contrast ratios between text and background colors. Get instant AA and AAA compliance results for accessibility.

Advertisement
Daily uses: 0 / 10 free   Upgrade for unlimited →
Sample Heading Text
This is sample body text at normal size to preview readability.

You've used 10 free runs today

Upgrade to Pro for unlimited checks and no ads.

Upgrade to Pro – $9/mo
Resets at midnight · Cancel anytime
Advertisement

How to use this tool

  • Pick your foreground (text) color using the color picker or type a hex code.
  • Pick your background color the same way.
  • The live preview updates as you choose colors.
  • Click Check Contrast to see your WCAG compliance results.
  • Aim for at least AA compliance for all text on your website.

WCAG contrast standards explained

AAA (7:1+) Highest accessibility — required for body text in strict compliance
AA (4.5:1+) Standard compliance — minimum for most websites and legal requirements
Fail (below 3:1) Poor readability — may cause accessibility violations and hurt user experience

Good color contrast also helps SEO indirectly — Google uses Core Web Vitals and accessibility signals as ranking factors.

Advertisement