Bits Kingdom

Contrast

Back to glossary

Contrast in digital design is the difference in lightness (and sometimes color) between foreground and background. If body text is pale gray on white, many people can’t read it — in sunlight, with low vision, or with aging eyes.

WCAG sets minimum contrast ratios for text and UI components. Contrast is a core accessibility requirement, not a style preference — especially for people with color blindness, and in dark mode where a light-theme palette often fails. It also helps conversion: a CTA that blends into the page never gets tapped. Don’t rely on color alone to mean “required” or “error”; pair it with labels or icons.

A real-life example of contrast

A restaurant menu in tiny gold type on a cream photo looks elegant in a mockup and unreadable on a phone at lunch. Bumping the text to a dark color on a solid background is contrast work — the same fix as checking a button against WebAIM’s contrast checker.

Check contrast early, not as a last polish pass. It sits next to alt text and keyboard access in inclusive design — see How to Design an Accessible Website and Web Accessibility and Inclusive Design.