Color Contrast Checker
Test foreground and background colors against WCAG AA and AAA standards. Get the exact contrast ratio and pass/fail status for normal and large text.
Contrast Ratio
4.50 : 1
WCAG Compliance
AA — Normal Text
Requires ≥ 4.5:1
—
AA — Large Text
Requires ≥ 3:1
—
AAA — Normal Text
Requires ≥ 7:1
—
AAA — Large Text
Requires ≥ 4.5:1
—
Preview
The quick brown fox jumps over the lazy dog.
Large Text Sample
Small print: Lorem ipsum dolor sit amet, consectetur adipiscing elit.
About Color Blindness
Note on color blindness: Contrast ratios measure luminance difference and apply to all vision types, but color blindness (protanopia, deuteranopia, tritanopia, achromatopsia) also affects how hues are distinguished. A pair of colors with adequate contrast may still be hard to tell apart for users with color vision deficiencies if they differ only in hue.
Best practice: Never rely on color alone to convey information — pair color with text labels, icons, or patterns. Avoid problematic pairings like red/green or blue/yellow as the sole differentiator.
FAQ
What is a WCAG contrast ratio?
It's a number (like 4.5:1) describing the difference in relative luminance between foreground and background colors. WCAG (Web Content Accessibility Guidelines) sets minimum ratios so text remains readable for people with low vision or color blindness. Higher numbers mean more contrast.
What is the difference between AA and AAA?
AA is the standard conformance level and is a common legal baseline (e.g., for accessibility regulations). AAA is the strictest level and not always achievable for all content. For normal body text, AA requires ≥ 4.5:1 and AAA requires ≥ 7:1.
What counts as "large text"?
WCAG defines large text as at least 18pt (24px) regular, or 14pt (18.66px) bold. Large text has a lower contrast threshold (3:1 for AA, 4.5:1 for AAA) because thicker strokes are easier to read.
How is the contrast ratio calculated?
Each color's relative luminance is computed from its sRGB red, green, and blue channels (with a gamma correction for dark values). The ratio is (L1 + 0.05) / (L2 + 0.05), where L1 is the lighter and L2 is the darker luminance. Pure black on pure white is 21:1, the maximum.
Does this work for gradients or images?
No — contrast ratios only apply between two solid colors. If text sits on a background image or gradient, you must test the lowest-contrast point manually, or place text on a solid overlay to guarantee readability.