MyTextify – Free browser-only tools
DevLocal only

WCAG Color Contrast Checker

Check color contrast ratios against WCAG 2.1 AA/AAA standards with color blindness simulation.

wcagcontrastaccessibilitya11ycolor
Your data stays in your browser — nothing is uploaded.
Foreground (Text) Color
Background Color
14.63:1
Contrast Ratio
The quick brown fox
jumps over the lazy dog. This is how your text looks on this background.
Small text sample — 12px equivalent
WCAG 2.1 Compliance
✓
AA — Normal Text
Pass — requires 4.5:1
✓
AA — Large Text
Pass — requires 3:1
✓
AAA — Normal Text
Pass — requires 7:1
✓
AAA — Large Text
Pass — requires 4.5:1
What do the levels mean?
  • AA Normal text — 4.5:1 minimum. Required for body text (under 18px or 14px bold).
  • AA Large text — 3:1 minimum. For text 18px+ or 14px+ bold.
  • AAA Normal text — 7:1 minimum. Highest standard for body text.
  • AAA Large text — 4.5:1 minimum. Highest standard for large text.

WCAG (Web Content Accessibility Guidelines) ensures content is perceivable by people with visual impairments, including color blindness and low vision.

💡

What is WCAG Color Contrast Checker?

WCAG Color Contrast Checker tests color pairs against Web Content Accessibility Guidelines (WCAG) 2.1 standards. Enter foreground and background colors to see the contrast ratio, AA/AAA compliance for normal and large text, and simulate how colors appear to people with color blindness.

🚀

How it Helps

  • ✓Verify text/background color combinations meet WCAG AA (4.5:1) and AAA (7:1) standards.
  • ✓Preview how your design appears to users with protanopia, deuteranopia, or tritanopia.
  • ✓Ensure your website meets legal accessibility requirements.
📖

Usage Guide

  1. 1Enter foreground (text) and background colors using HEX codes or the color picker.
  2. 2View the contrast ratio and WCAG pass/fail badges for AA and AAA standards.
  3. 3Use the simulation dropdown to preview color blindness conditions.

Frequently Asked Questions

4.5:1 for normal text (under 18px or 14px bold), and 3:1 for large text (18px+ or 14px+ bold).
AAA is the highest WCAG conformance level, requiring 7:1 for normal text and 4.5:1 for large text. It's recommended but not required by most regulations.
The simulation uses standard color matrix transformations that approximate how colors appear to people with protanopia, deuteranopia, and tritanopia. It provides a good representation for design decisions.
Yes. The contrast ratio calculation follows the exact formula specified in WCAG 2.1 using relative luminance.