Color Contrast Checker & WCAG Accessibility Validator
Professional color contrast checker with full WCAG color contrast AA/AAA testing, color contrast ratio checker, colorblind accessibility checker with 4 vision deficiency simulations, and web color accessibility bulk palette tester. Validates colour contrast accessibility to WCAG 2.1 & 3.0 standards instantly.
Click any swatch to set as foreground color for the contrast accessibility checker.
Simulates color vision deficiency (CVD) for your selected color pair. Each simulation shows the contrast ratio under that visual accessibility condition.
WCAG Color Contrast: Complete Accessibility Reference Guide
Understanding color contrast accessibility is fundamental for building inclusive web experiences. This guide covers the WCAG 2.1 standards, contrast ratio calculation methodology, colorblind accessibility simulation, and production-ready implementation guidelines for designers and developers.
1. WCAG Color Contrast Requirements by Level
| WCAG Level | Text Type | Minimum Contrast Ratio | Applies To |
|---|---|---|---|
| AA (Standard) | Normal body text | 4.5:1 | Text under 18pt (24px) or bold text under 14pt (18.67px) |
| AA (Standard) | Large text | 3.0:1 | Text 18pt (24px)+ or bold 14pt (18.67px)+ |
| AAA (Enhanced) | Normal body text | 7.0:1 | Healthcare, legal, government websites |
| AAA (Enhanced) | Large text | 4.5:1 | High-contrast display mode |
| UI Components | Non-text elements | 3.0:1 | Borders, icons, form input outlines, chart data points |
2. Contrast Ratio Calculation Formula
The WCAG relative luminance formula is derived from the sRGB IEC 61966-2-1 specification. The linearization step corrects for gamma encoding applied to sRGB values:
// Step 1: Linearize each channel
R_sRGB = R / 255
if (R_sRGB <= 0.03928) then R_lin = R_sRGB / 12.92
else R_lin = ((R_sRGB + 0.055) / 1.055) ^ 2.4
// Step 2: Relative Luminance (L)
L = 0.2126 * R_lin + 0.7152 * G_lin + 0.0722 * B_lin
// Step 3: Contrast Ratio (L1 = lighter, L2 = darker)
Contrast = (L1 + 0.05) / (L2 + 0.05)
The luminance-weight coefficients (0.2126, 0.7152, 0.0722) reflect the human eye's differential sensitivity to red, green, and blue wavelengths. The green channel carries the most perceived luminance weight.
3. Color Blindness Accessibility: Types and Simulation
This color blindness accessibility checker simulates four types of color vision deficiency (CVD). These are important for ensuring visual accessibility checker compliance beyond pure contrast ratios:
| CVD Type | Affected Channel | Prevalence | Common Confusion |
|---|---|---|---|
| Deuteranopia | Green cone (M-cone) absent | ~5% of males | Red / green |
| Protanopia | Red cone (L-cone) absent | ~1% of males | Red / green (different spectrum) |
| Tritanopia | Blue cone (S-cone) absent | ~0.01% of population | Blue / yellow |
| Achromatopsia | All cone function absent | ~0.003% of population | All color (monochromatic) |
4. Implementing Accessible Color Pairs in CSS
/* WCAG AA Compliant dark-mode color pair */
:root {
--color-background: #0F172A; /* Slate 900 */
--color-text: #F8FAFC; /* Slate 50 */
/* Contrast: 19.5:1 - Passes AA and AAA */
}
/* WCAG AA Compliant accent pair */
.btn-primary {
background: #1D4ED8; /* Blue 700 */
color: #EFF6FF; /* Blue 50 */
/* Contrast: 8.1:1 - Passes AA and AAA for normal text */
}