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