Textbook of Usability

Contrast is the difference in luminance or colour between an object and its background that makes the object distinguishable. The human visual system is far more sensitive to contrast than to absolute light levels — a consequence of Weber's Law and the adaptive nature of vision.

In design, contrast has several related meanings:

• Luminance contrast — brightness difference, measured as a ratio (e.g. 4.5:1)
• Colour contrast — hue difference between foreground and background
• Visual hierarchy contrast — larger/bolder elements dominate smaller/lighter ones

WCAG contrast requirements:

• 4.5:1 minimum for normal text (AA level)
• 3:1 minimum for large text (18pt or 14pt bold)
• 7:1 for AAA level (enhanced accessibility)
• 3:1 for non-text content (icons, UI components)

These thresholds derive from contrast sensitivity research and include margins for age-related vision decline. Many designs that look acceptable to young designers with perfect vision fall below these thresholds for older users or those with low vision.

Contrast also drives visual hierarchy. An element with high contrast to its surroundings dominates the visual field; low-contrast elements recede. Good design uses contrast deliberately: high contrast for primary actions, moderate for navigation, low for background content.

Insufficient contrast is one of the most common accessibility failures. Automated tools (axe, Lighthouse, WAVE) catch contrast violations reliably, making it one of the easiest WCAG issues to fix — yet it persists in countless production interfaces.