The quick brown fox jumps over the lazy dog.

Contrast Ratio 21.0:1

WCAG AA

Normal Text (4.5:1)
Large Text (3:1)

WCAG AAA

Normal Text (7:1)
Large Text (4.5:1)

Large text is defined as 18pt (approx. 24px) or 14pt bold (approx. 18.6px).

Check Color Contrast for Web Accessibility

Ensure your content is readable for everyone. Calculate contrast ratios instantly to meet WCAG accessibility standards and improve usability.

Why Contrast Matters

High contrast isn't just a design preference—it's a requirement for an inclusive web. Whether you're designing for users with low vision or someone viewing a screen in direct sunlight, clear contrast ensures your message gets across. Use this tool to validate your palette and bridge the gap between aesthetics and accessibility.

How to Use

  • Pick Your Colors: Enter Hex codes or use the color picker to see your ratio in real-time.
  • Target Standards: Verify your design against both AA (minimum) and AAA (enhanced) compliance levels.
  • Compare Text Sizes: Standards change based on font size. The tool automatically evaluates both normal and large text.
  • Preview in Action: Use the visual preview box to see how your combination looks "in the wild."

FAQ

  • What is the difference between AA and AAA? Level AA is the baseline for most websites, requiring a 4.5:1 ratio. Level AAA is the gold standard (7:1), intended for maximum readability.
  • What counts as "Large Text"? Generally, text that is 18pt (24px) or larger, or 14pt (18.67px) and bold.
  • Does it work with RGBA? This tool calculates contrast between solid colors. If your design uses transparency, use the Hex code of the final color after it blends with the background.

The Science of Luminance

The WCAG formula is based on Relative Luminance. Because human eyes are more sensitive to certain wavelengths, we perceive green as much brighter than blue. The formula weights these differently: Green contributes roughly 72% to perceived brightness, while Blue contributes only 7%. This is why a pure blue background requires significantly lighter text to pass accessibility checks.