Color contrast is one of the most commonly overlooked accessibility requirements in web development — and one of the easiest to fail accidentally. You pick a beautiful grey text on a white background, it looks fine on your calibrated monitor, and then someone with low vision or a washed-out phone screen can't read it at all. This post covers how contrast ratios work, what WCAG requires, and how to check your colors before they ship. What Is a Contrast Ratio? The contrast ratio between two colors is a number from 1:1 (no contrast — same color) to 21:1 (maximum contrast — black on white). It is calculated from the relative luminance of each color, which is a perceptual measure of how bright a color appears to the human eye. The formula is: contrast ratio = (L1 + 0.05) / (L2 + 0.05) Enter fullscreen mode Exit fullscreen mode where L1 is the luminance of the lighter color and L2 is the luminance of the darker one.…