Provide sufficient contrasts for large sized text
no. 041
Make sure a contrast ratio of at least 3 to 1 exists between text and background
Color combinations are used to convey information all the time, but how efficient the conveyed information is entirely depends on the end user’s ability to perceive contrast between those colors. Therefore, making sure that end users can perceive the difference between the color of the text and the color of the background behind the text is critical. Hence, the importance of providing a sufficient contrast ratio, whenever color combinations are used.
To do so, simply make sure that any foreground/background color combinations for large sized text that is at least 18 point (if not bold) or at least 14 point (if bold) meets a minimum of 3 to 1. Color contrast ratio can be easily measured, using readily available tools on the Web, such as the one referenced in “Testing Methodology” below. Doing so will ensure that people who are colorblind – but also people with low vision or those viewing the content in less-than-optimal lighting settings – will have better chances of adequately perceiving colors.
User Story
As a colorblind user, I want interfaces to rely on color combinations that are distinctive enough, so that I can easily perceive the contrasts and not miss out on any information.
Simple Code Example
Not Applicable
Testing Methodology
Using the Color Contrast Check tool, enter the hexadecimal value of both foreground and background colors to determine the contrast ratio. Any value that is under 3 to 1 for text that is at least 18 point (if not bold) or 14 point (if bold) results in insufficient contrast.
Specification Details
WCAG 2.0: Level A
Principle: Perceivable
Guideline: 1.4 Distinguishable
Success Criterion: 1.4.3 Contrast (Minimum)
Related Technique: G145
Category: General