search

Found

info About

Check color contrast ratio against WCAG guidelines for web accessibility.

📘 How to Use

  1. Set the background color and text color using the color picker or code input.
  2. Automatically view the contrast ratio and WCAG AA/AAA pass/fail evaluation.
  3. If the standards are not met, use the “Adjust to AA/AAA Standards” button to automatically fix it.

Contrast Ratio Checker

Contrast Checker

Verify WCAG 2.1 accessibility standards in real-time.

#
#

Sample text for previewing accessibility.

The quick brown fox jumps over the lazy dog.

Contrast Ratio
1.00 : 1

AA (Normal Text)

--

AA (Large Text)

--

AAA (Normal Text)

--

AAA (Large Text)

--

grid_view Related

  • No related tools configured.
Article

Check Color Contrast for Web Accessibility ✨

Instantly verify that your text and background combinations are readable and meet global accessibility standards.

💡 What This Tool Does

High contrast is essential for inclusive design. Use this tool to: - Test Readability: Ensure users with visual impairments or those in high-glare environments can read your content. - Verify WCAG Compliance: Check against Web Content Accessibility Guidelines (WCAG 2.1) for both AA and AAA levels. - Preview in Real-Time: Watch your colors interact in the preview window as you adjust values.

📘 Pro Tips

  • Flexible Inputs: Enter HEX codes directly or use the color picker to experiment with different shades.
  • Know Your Grades: Check the specific feedback for "Normal" and "Large" text. Larger fonts require less contrast to pass.
  • Fix Failures Instantly: If your combination fails, click "Suggest Accessible Color" to find the nearest shade that meets the AA standard.

🧐 Quick Reference

  • AA vs. AAA:
  • AA is the standard benchmark for most sites (4.5:1 ratio).
  • AAA is the gold standard for long-form reading and high legibility (7.0:1 ratio).
  • What counts as "Large Text"?
  • Text that is 18pt (24px) or larger, or 14pt (approx. 19px) and bold.
  • The Formula:
  • We use the WCAG relative luminance formula to compare the brightness of the foreground against the background.

📊 Why It Matters

Roughly 1 in 12 men and 1 in 200 women have some form of color vision deficiency. Maintaining high contrast ratios isn't just about "checking a box" for compliance—it ensures your message reaches every user, regardless of how they see the world.