If you’re a content creator, you probably know that color can convey personality, attract attention, and indicate importance. When used intentionally, color can help make your content more engaging, and help some people understand and connect with your web pages and messages.
Remember that your content must be accessible to those who are color blind and to those with low vision or vision impairments who require the use of assistive technology.
What you may not know is that while color is powerful, it must be used carefully to ensure that everyone is able to access your information equitably. As content creators, it’s our job to ensure everyone can understand and connect with our content, so it’s critical that we use color appropriately.
Fortunately, it’s not that hard to create content that uses color to enhance your message while remaining accessible! Here are some tips to keep in mind.
Ask yourself these questions when using color
Can you still understand everything the design is communicating without depending on color?
Some people with vision impairments interpret color and contrast differently, making it difficult or impossible for them to access information communicated only by color.
Common problems when using color
- Red and green color combinations. Approximately 5% of people cannot distinguish between red and green.
- Links indicated by color alone. The links in your content must also be distinguished by a style technique such as underlining or bold.
- Color alone used to differentiate between two disparate elements or categories. When you use color alone as indicators, it can be difficult for people who have a hard time with certain color combinations to interpret information.
Ways to avoid these problems when using color
In general, it’s best practice to use color primarily for decoration. When you do use color to enhance meaning, make sure that you also use icons, written content, or other visual elements to reinforce clear communication of the content. This is particularly important when your content indicates an action, prompts a response, or distinguishes a visual element.
✔ Do: Use colors with symbols (such as asterisks) or words to indicate importance.
- Inaccessible example: Enter your area code with your phone number.
- Accessible example: Required: Enter your area code with your phone number.
✔ Do: Consider using patterns instead of solid colors in graphs and charts.
✘ Don’t: Provide instructions that rely on color or other sensory characteristics.
- Inaccessible example: “Select the red button.”
- Accessible example: “Select the Submit button.”
Is there enough contrast between text and its background color?
The content you create must have sufficient contrast between text and background color to ensure that people who have low vision can read it.
The following video provides an introduction to using colors with good contrast. Visit Web Accessibility Perspectives: Colors with Good Contrast for more information and a text transcript of the video, with a description of visuals.
To check color contrast in your content, you can use a tool such as the Google Chrome extension ColorZilla to identify specific colors (hex numbers) of the foreground and background. Then use a tool such as WebAim’s Contrast Checker to evaluate whether those specific colors meet the contrast requirements between foreground and background (greater than or equal to 4.5:1 for small text, and 3:1 for large text).
As a note, color contrast ratio requirements apply to text and graphics that are essential for understanding the content or functionality. You don’t need to meet color contrast requirements for purely decorative graphic elements.
Tools to help you use color and maintain accessibility
We recommend the following tools to help you use color in accessible ways:
Learn more about creating accessible digital content
Visit the Digital Accessibility training resources on the PSU website to learn more about creating accessible digital content.