WCAG Color Contrast Guide: Accessible Web Design

Color contrast is one of the most common accessibility failures on the web—and one of the most preventable. An estimated 1 in 12 men and 1 in 200 women have some form of color vision deficiency. For users with low vision or aging eyes, poor contrast doesn't just make text hard to read; it makes it invisible. WCAG (Web Content Accessibility Guidelines) defines specific contrast ratios that text and UI elements must meet. Getting this right is no longer optional—it's a legal requirement in many jurisdictions and a core part of building software that actually works for everyone. This guide explains the math behind contrast ratios, what WCAG requires, how to test your designs, and practical strategies for building accessible color systems. Use the DevPlaybook Color Picker to experiment with colors as you read. What Is Color Contrast Ratio? Contrast ratio is a mathematical expression of the luminance difference between two colors. It's calculated using the relative luminance of each color a