What is color contrast in UX design?
Color contrast refers to the difference in luminance between a foreground element, typically text or an icon, and its background color. The contrast ratio is calculated using a formula defined by the W3C that compares the relative luminance of the two colors on a scale from 1:1, no contrast, to 21:1, black on white. Sufficient color contrast ensures that text and interface elements are readable for users with low vision, color blindness, or those viewing screens in bright ambient light.
What are the WCAG color contrast requirements?
The Web Content Accessibility Guidelines define minimum contrast ratios at two conformance levels. WCAG AA, the standard requirement for most products, requires a contrast ratio of at least 4.5:1 for normal text and 3:1 for large text, defined as 18pt or 14pt bold. WCAG AAA, the enhanced level, requires 7:1 for normal text and 4.5:1 for large text. Non-text elements such as icons, form borders, and UI components that convey information require a minimum 3:1 contrast ratio against adjacent colors. Decorative elements and disabled controls are exempt from contrast requirements.
Why do designers frequently miss contrast requirements?
Color contrast failures are common because designers evaluate color combinations on calibrated studio monitors in controlled lighting conditions, which is rarely how users encounter the interface. Light grey text on a white background may look elegant on a high-quality display but becomes illegible on a lower-quality screen, in direct sunlight on a mobile device, or for any user with reduced contrast sensitivity. The human visual system is also poor at accurately judging absolute contrast ratios: colors that appear sufficiently different to the designer may still fail WCAG thresholds. Checking contrast ratios with a dedicated tool rather than relying on visual judgment is essential. The color contrast guide covers tools and workflow for integrating contrast checking into the design process.