Skip to main content
All For Web For All

contrast

GUIDELINES 1.4.3

back

Overview

This guide addresses how sighted users perceive text against backgrounds. The focus is readability, particularly for those with color vision deficiency, low vision, or color blindness. It explains contrast ratio importance and implementation.

Who is impacted

Users with low vision, color blindness, or those viewing screens in bright environments.

How to test

Use a contrast checker tool to verify text meets the minimum 4.5:1 ratio for normal text and 3:1 for large text.

Resources

Visit contrastchecker.com and WebAIM Contrast Checker for detailed guidance.

Understanding Contrast Ratios

Contrast ratio is the difference in luminance between foreground text and its background. WCAG defines minimum ratios to ensure readability: 4.5:1 for normal text (under 18pt or 14pt bold) and 3:1 for large text (18pt+ or 14pt+ bold). These ratios help users with low vision or color deficiencies read content comfortably.

The contrast ratio is calculated using the relative luminance of the lighter and darker colors. A ratio of 1:1 means no contrast (same color), while 21:1 is the maximum contrast (black on white).

How to Check Contrast

Use online tools like contrastchecker.com or browser extensions like WAVE to verify your color combinations meet WCAG standards. Many design tools like Figma and Sketch also have built-in or plugin-based contrast checkers. Test all text elements including headings, body text, links, buttons, and form labels.