WCAG Color Contrast Ratio Checker
Calculate exact relative luminance and contrast ratios between foreground text and background colors to ensure compliance with WCAG 2.1 AA and AAA accessibility requirements.
Normal Body Text (<18pt)
Large Text (≥18pt or 14pt bold)
UI Components & Icons
Live Contrast Simulation
This is an interactive simulation of normal body text (16px) rendered with your selected foreground color against the active background color. Clear contrast ensures readability for users with low vision or color blindness.
Understanding WCAG 2.1 Luminance Mathematics
The contrast ratio is calculated using the relative luminance ($L$) formula specified by the World Wide Web Consortium (W3C):
$$\text{Contrast Ratio} = \frac{L_1 + 0.05}{L_2 + 0.05}$$
Where $L_1$ is the relative luminance of the lighter color and $L_2$ is the relative luminance of the darker color, ranging from $1:1$ (identical colors) to $21:1$ (pure black on pure white).