◎ SEOlust
Security

WCAG Color Contrast Checker

Check text/background color contrast against WCAG 2.1 AA and AAA for normal and large text, with a live preview.

All tools
–
contrast ratio
Large text preview (24px bold)
Normal body text preview at 15px. The quick brown fox jumps over the lazy dog.

About the WCAG Color Contrast Checker

Check whether your text and background colors meet WCAG 2.1 contrast requirements for accessibility, with an instant AA/AAA verdict and a live preview.

What this tool does

Pick a foreground (text) color and a background color and see the exact contrast ratio plus whether it passes WCAG 2.1 at levels AA and AAA for both normal and large text. A live preview shows the two colors together so you can judge readability.

The thresholds

WCAG defines minimum contrast ratios:

  • AA normal text: at least 4.5:1
  • AA large text (18pt or 14pt bold): at least 3:1
  • AAA normal text: at least 7:1
  • AAA large text: at least 4.5:1
  • UI components and graphics: at least 3:1

Why it matters

Sufficient contrast makes content readable for people with low vision or color deficiency, and in bright sunlight. It is also an SEO and legal consideration:

  • Accessibility is part of good UX and is referenced in Google's page-experience guidance.
  • Many organizations are legally required to meet WCAG AA.
  • Better contrast reduces bounce and improves comprehension for everyone.

FAQ

What color formats can I enter?
Hex colors in 3- or 6-digit form, such as #333 or #1F2937. You can also use the color pickers.
What counts as 'large text'?
Text that is at least 18pt (about 24px) regular, or 14pt (about 18.66px) bold.
How is the ratio calculated?
Using the WCAG relative luminance formula: (L1 + 0.05) / (L2 + 0.05), where L1 and L2 are the lighter and darker luminances.
Is my data sent anywhere?
No. All calculations run in your browser.

Related tools

Pro tip: pair this tool with Robots.txt Exposure Checker and Cookie Security Checker for a faster SEO workflow.