There’s a red circle for stop, a green circle for go, and a yellow circle for caution—but no text, shapes, or symbols. If you’re unfamiliar with the system, or if it’s dusk and the colors are harder to distinguish, you might find yourself confused or, worse, making the wrong decision.
This is what it’s like for users when websites rely solely on color to convey important information. For someone who is colorblind, has low vision, or even just experiences screen glare, those red and green cues might look identical. Adding text, patterns, or symbols—like the shape of a stop sign or a traffic light’s position—ensures everyone gets the message, no matter their circumstances.
Designing with redundancy in mind makes your content clear, inclusive, and impossible to miss—no matter what “road” users are traveling on.
Best practices for accessible design
1. Use Text Labels and Icons
Pair color with text labels or icons to clarify meaning.
- Add text labels – Include words to indicate the meaning behind colored elements. For instance, if red signifies an error, add the word “Error” next to it.
- Incorporate icons – Use familiar icons, like a checkmark for approval or an exclamation point for warnings, to support the color cue.
2. Ensure sufficient color contrast
Contrast between text and background is critical for readability.
- Follow WCAG guidelines – Aim for a minimum contrast ratio of 4.5:1 for regular text and 3:1 for large text. Silktide’s color contrast checker can help you ensure compliance (see WCAG 1.4.3 Contrast).
- Avoid hard-to-see color combinations – Skip color combos like light gray on white or red on green, which are difficult for many users to distinguish.
See WCAG 1.4.3 Contrast for more details.
3. Use patterns and textures
In charts, graphs, or other visuals, add patterns to differentiate areas without relying solely on color.
- Apply patterns – Use stripes, dots, or other patterns in visual elements to help users distinguish sections even without color cues.
- Consider textures for physical designs – Texture can help differentiate elements in tactile designs that might otherwise rely on color.
4. Design with colorblindness in mind
Choose color schemes that are accessible for colorblind users.
- Use color blindness simulators – Preview how your design looks to users with different types of color blindness using tools like Silktide’s color blindness simulator.
- Avoid problematic color pairs – Steer clear of common difficult pairs like red-green and blue-yellow. Instead, opt for easily distinguishable combos, such as blue and orange.
5. Provide alternative communication methods
Offer additional ways to convey information beyond visual cues.
- Add text descriptions – Provide clear, detailed text explanations for charts and infographics so all users can understand the information.
- Consider audio cues in interactive designs – In apps or interfaces, use sound alongside color to indicate actions or statuses for a wider range of accessibility.
6. Test your designs for accessibility
Testing ensures your design is accessible to all.
- Test with users – If possible, include users with disabilities in your testing process for valuable feedback.
- Use accessibility tools – Screen readers, color contrast checkers, and color blindness simulators can help you spot accessibility issues before launch.