Enhanced minimum contrast of 7:1
Provide strong contrast between text and its background to ensure readability for users who need higher contrast levels.
Acceptance Criteria
• Contrast Ratio: Text and images of text must have a contrast ratio of at least 7:1 against their background.
• Large Text: Large-scale text (18px or larger) must have a contrast ratio of at least 4.5:1.
• Incidental Text: Text or images of text that are decorative, part of inactive UI components, not visible, or part of a picture with significant other visual content are exempt from contrast requirements.
• Logotypes: Text within logos or brand names does not need to meet the enhanced contrast ratio.
Examples
• Good: Body text on a webpage with a contrast ratio of 8:1, ensuring it is readable even for users with low vision.
• Good: A heading with a contrast ratio of 7.5:1, meeting the enhanced contrast requirement for improved readability.
• Bad: Text with a contrast ratio of 5:1 against its background, which does not meet the enhanced contrast criteria.
Exceptions
• Large Text: Text that is 18px or larger (or 14px bold) should meet a minimum contrast ratio of 4.5:1.
• Incidental Text: Decorative text, text in inactive UI components, or text that is part of an image with significant visual content does not need to meet this criterion.
• Logotypes: Text used in logos or brand names is exempt from the enhanced contrast requirement.
Tips
• Use contrast checking tools to ensure that text meets the 7:1 contrast ratio for enhanced visibility.
• Combine color contrast with other visual elements like bold text or outlines to improve text readability.
• Regularly test your design with users who have low vision to ensure that the contrast meets their needs.
How to test?
1. Contrast Ratio Check: Utilize contrast checking tools to measure the contrast ratio between text and background colors, ensuring it meets the 7:1 requirement for standard text and 4.5:1 for large text.
2. Design Review: Verify that all text and images of text on your site adhere to the specified contrast ratios.
3. User Feedback: Gather feedback from users, especially those who require enhanced contrast, to ensure that the text is readable and accessible.