Color Contrast & Visual Accessibility

Color contrast is the difference in luminance (brightness) between text and its background. High contrast means the text stands out clearly from the background — like black text on a white page. Low contrast means the text blends into the background — like light gray text on a white page.

Contrast matters because not everyone sees color the same way. Approximately 300 million people worldwide have color vision deficiency (commonly called "color blindness"). Another 250 million have low vision. Even people with perfect vision struggle to read low-contrast text in certain conditions: bright sunlight washing out a phone screen, a dimly lit room, an aging monitor with poor color reproduction, or simply tired eyes at the end of a long day.

Try this experiment: open any website on your phone and go outside on a sunny day. Suddenly, that light gray text on white that looked fine indoors is completely unreadable. The sun creates a situational contrast problem that affects everyone. Now imagine that difficulty being permanent — that is the everyday experience for someone with low vision.

The Web Content Accessibility Guidelines define specific contrast ratios to ensure text is readable. These are not arbitrary numbers — they are based on research into human visual perception and were designed to cover the broadest range of visual abilities.

Contrast ratio is measured as a ratio between two values, ranging from 1:1 (no contrast — the foreground and background are the same color) to 21:1 (maximum contrast — pure black on pure white). The higher the ratio, the more readable the text is for more people.