Free Accessibility Tool

Color Contrast Checker — WCAG 2.1 Accessibility Tool

Check the contrast ratio between any two colors. Instantly see if your text and background pass WCAG 2.1 AA and AAA accessibility standards — free and browser-based.

#
#
💡 Tip: Click the color swatch to open a color picker, or type a HEX code directly. Use the swap button to reverse foreground and background.
Sample Text — Large Heading
Small body text sample for readability check. WCAG requires sufficient contrast for all text sizes.
4.54:1
Contrast Ratio
AA Normal text (≥4.5:1) ✓ Pass
AA Large text (≥3:1) ✓ Pass
AAA Normal text (≥7:1) ✓ Pass
AAA Large text (≥4.5:1) ✓ Pass
🎨 Color Picker 🎨 Palette Generator 🌈 Gradient Generator 🔄 HEX ↔ RGB

What is Color Contrast and Why Does It Matter?

Color contrast refers to the difference in perceived brightness between two colors. When text and its background don't have enough contrast, people with low vision or color blindness struggle to read it.

WCAG 2.1 (Web Content Accessibility Guidelines) defines minimum contrast requirements for digital content. Following these standards ensures your website is accessible to everyone and is a legal requirement in many jurisdictions.

WCAG Contrast Ratio Requirements

AA Level (minimum standard): Normal text requires a 4.5:1 ratio. Large text (18pt+ or 14pt+ bold) requires 3:1. This is the minimum for legal compliance in most regions.

AAA Level (enhanced standard): Normal text requires 7:1. Large text requires 4.5:1. This is the gold standard for maximum accessibility, recommended for critical text like legal documents and public services.

This checker calculates the relative luminance of both colors using the WCAG formula and computes the contrast ratio. A ratio of 1:1 is identical colors; 21:1 is maximum contrast (black on white).