WCAG 1.4.3 Contrast (Minimum)
This page demonstrates how to meet and how to fail the WCAG 2.1 criterion 1.4.3: Contrast (Minimum) (Level AA).
- Goal: Text (and images of text) must have a contrast ratio of at least 4.5:1 against their background.
- What to do: Use sufficient color contrast for all text and important visual elements.
- Why it's important: Low contrast can make content unreadable for users with low vision or color blindness.
What to Avoid: Insufficient Contrast
This is an example of text with insufficient contrast against its background.
Why this fails: The text color (#cccccc) does not provide enough contrast with the white background, making it hard to read for many users.
Example: Sufficient Contrast
This is an example of text with sufficient contrast against its background.
Why this works: The text color (#212529) provides a high contrast ratio with the white background, making it easily readable for everyone.
Best Practices Summary
- Use a contrast checker tool to verify color choices
- Aim for a contrast ratio of at least 4.5:1 for normal text
- For large text (18pt/24px or bold 14pt/18.66px), a ratio of 3:1 is sufficient
- Test your site in grayscale or with high-contrast mode enabled
Skip to main content