WCAG Color Contrast Checker
Measure contrast ratios between foreground text and background colors with WCAG 2.1 AA and AAA compliance scores.
Color Pair
WCAG Compliance Results
Headline Text Sample (Large 24px)
This is regular 16px body copy demonstrating real-world legibility under your selected foreground and background colors.
About the WCAG Color Contrast Checker
Web Content Accessibility Guidelines (WCAG) dictate minimum visual contrast ratios between text and background colors to ensure readable content for users with low vision or color blindness.
Our WCAG Contrast Checker evaluates any color pair, calculating relative luminance and reporting exact compliance across normal text, large text, and graphical user interface components.
How the Calculations Work
Contrast ratio is computed from relative luminance values L1 and L2 normalized on a scale from 1:1 (no contrast) to 21:1 (maximum contrast).
Ratio = (L1 + 0.05) / (L2 + 0.05) where L = 0.2126*R + 0.7152*G + 0.0722*B
Variables & Definitions
- L1: Luminance of lighter color
- L2: Luminance of darker color
- Ratio: Contrast score:1
Black (#000000) text on White (#FFFFFF) background provides the maximal 21.00:1 ratio, easily surpassing WCAG AAA standards.
Key Terms Explained
WCAG Level AA
Requires a minimum contrast ratio of 4.5:1 for normal text and 3.0:1 for large text (18pt+ or 14pt bold).
WCAG Level AAA
The highest accessibility benchmark requiring 7.0:1 for normal text and 4.5:1 for large text.
Practical Tips & Pitfalls to Avoid
Never rely on color alone
Pair high contrast colors with text labels and icons to ensure complete cognitive accessibility.
Frequently Asked Questions
WCAG Level AA mandates a minimum contrast ratio of 4.5:1 for body text smaller than 18pt.