Step 1: Understand your goals
- Color contrast - Color contrast meets minimum requirements for text and non-text content. For example, text is easy to read because it is much darker or lighter than the background.
- Color alone- Color alone is not used to convey a message or status, or to distinguish a link from adjacent text.
Color accessibility resources
Understanding Success Criterion 1.4.1: Use of Color on w3.org
Step 2: Watch the video
Not everyone sees color. Or, if they do, they may not see colors as well as others. Some users may have color blindness, cataracts, or any number of conditions that make it hard to see colors.
Every day, people visit websites and have trouble reading content because the font color is too pale or too similar to the background. Or they overlook a text link because it isn’t obviously different from nearby text.
That’s why colors and contrast matter. Your choices can make it easier for people to use your website.
Step 3: Practice your new skill
Basic tests
- Use the ‘color contrast’ module in ANDI to verify there are no ‘Contrast Alerts’ reported in the Accessibility Alerts section.
- Use a tool like the WebAIM Contrast Checker to test text-to-background contrast. For text, you will typically look for a 4.5:1 ratio. (WebAIM tool will say ‘PASS’ for WCAG 2.1 AA when met.)
- Verify that the clickable area of any non-text elements, such as icons and clickable buttons, have at least a 3:1 ratio compared to the background. (WebAIM tool will state ‘PASS’ for non-text elements next to WCAG 2.1 AA.)
- Make sure color is not the only way to communicate a message, status, or chart/data viz label on the page. Have text labels or patterns with a legend in case users can’t tell the colors apart.
- If color is used to distinguish links from the unlinked text next to it, make sure that there is another visible way to identify the links, such as an underline.