Color Contrast (WCAG 1.4.3)

What is it?

WCAG Success Criterion 1.4.3 (Contrast — Minimum) requires that the visual presentation of text and images of text has a contrast ratio of at least 4.5:1 for normal text and 3:1 for large text (18pt / 24px+ or 14pt / 18.67px+ bold). This ensures text is readable for users with low vision or color vision deficiencies without requiring assistive technology.

Why it matters

Approximately 8% of males and 0.5% of females have some form of color vision deficiency. Low vision affects an additional 246 million people worldwide. Poor contrast makes text unreadable for these users and also degrades readability for everyone under difficult conditions — bright sunlight, small screens, or poor display calibration. WCAG 1.4.3 is Level AA, meaning it is the legal standard across most jurisdictions.

Best Practices

• Use a contrast checker during design, not after. Tools like the WebAIM Contrast Checker, Colour Contrast Analyser (desktop app), and Figma plugins (A11y - Color Contrast Checker) give real-time feedback.
• Target a minimum 4.5:1 ratio for all body and UI text. Aim for 7:1 (WCAG AAA) for critical interface text.
• For large text (18pt+ or 14pt+ bold), the minimum is 3:1. However, UI labels and body copy are rarely "large text" — use 4.5:1 as your safe default.
• Check contrast in both light and dark modes. Dark mode palettes frequently introduce contrast failures on secondary text colors.
• Placeholder text in inputs must also meet contrast requirements. Many designs fail here because placeholder text uses a very light gray.
• Don't rely on brand colors at their natural saturation — brand palettes are often designed for visual impact, not readability.
• Test with simulated color blindness. Browser DevTools and tools like Stark simulate deuteranopia, protanopia, and tritanopia.
• Check text on images, gradients, and transparent overlays separately — the background color changes across the element.

Common Mistakes

• Using light gray (#999, #aaa) on white — extremely common, usually fails WCAG AA.
• Assuming brand colors pass contrast without checking. Many brand palettes use medium-saturation colors that fail on white or dark backgrounds.
• Failing to check placeholder text contrast — browsers render placeholder with reduced opacity by default, making failures invisible until measured.
• Only testing in ideal screen conditions. Designers view at full brightness on calibrated monitors. Users view under florescent lights, outdoors, or on budget screens.
• Confusing contrast with colorblindness. Contrast is about light/dark difference, not hue. A high-contrast design can still be unusable for red-green colorblind users if it relies on hue alone for meaning.
• Thinking decorative text doesn't need contrast — decorative text that happens to be legible becomes content users rely on.

Checklist

Research & Theory

Real-World Examples