For users with visual impairments, or those viewing content on small screens in bright sunlight, contrast is the difference between accessible and inaccessible.
Contrast (Enhanced) raises the bar, requiring stronger contrast between text and background to make sure your content is always crisp, clear, and easy to read for everyone.
Who this impacts
- People with low vision: Higher contrast ensures text stands out clearly, improving readability and reducing eye strain.
- People with color blindness: Enhanced contrast helps make it easier to distinguish between text and background, even when colors are hard to differentiate.
- People using mobile devices: Enhanced contrast improves readability, especially in bright or dim lighting.
- Everyone: Better contrast improves the readability of content for all users, regardless of device or viewing conditions.
How to meet Contrast (Enhanced)
- Maintain a minimum of 7:1 contrast ratio for regular text: Ensure that the contrast ratio between the text and its background is at least 7:1 for “normal-sized” text.
- Use at least a 4.5:1 ratio for large text: Larger text can have a slightly lower contrast, but it must still meet a 4.5:1 contrast ratio.
- Test using contrast checking tools: Ensure that your design meets the enhanced contrast requirements with Silktide’s free browser extension.
Practical example
Exceptions
Logos, decorative images, and text that is part of a non-essential image are not required to meet Contrast (Enhanced) guidelines.
Top tips
- Aim for higher contrast: Even if your design meets the minimum contrast ratio, consider going beyond to improve readability for everyone.
- Check with real users: Get feedback from users with visual impairments to ensure that your design is as readable as possible.
- Consider all environments: Test your design in various settings, including on mobile devices and under different lighting conditions, to ensure readability.
- Use software: Free online tools like the Silktide Browser Extension are available to help you test the contrast ratio of your text and background, and can even simulate glare on the screen.