Color Alone Is Not Enough: 7 Ways To Support the Use of Color on Your Website
For many sighted website users, color is a useful way of sorting and coding information. But it’s important to remember that being sighted is not the “default” condition; the World Health Organization estimates that approximately 2.2 billion people have some kind of visual disability. That’s nearly 30% of the world’s population!
People with visual disabilities, including those who are red-green colorblind, blue-yellow colorblind, low-vision, blind, or deaf-blind, may not be able to see the differences between colors, regardless of the level of contrast between them. Therefore, relying on color alone to communicate information could deny important content information to a significant portion of your users.
This isn’t to say that you can’t use color to convey information - in fact, it’s a useful way to reinforce information for users who can perceive color differences. But to ensure that visually disabled users can access your content, the Web Content Accessibility Guidelines (WCAG) require that websites include at least one non-color visual cue to communicate the same information. As is often the case, solutions designed with accessibility in mind will benefit non-disabled users as well - including people who prefer to print things out in black and white.
What can I use to support color for accessibility?
There are many different ways that you can visually communicate information that does not require color. There is no one-size-fits-all solution, and which mechanism you use depends on your situation and what information you’re trying to convey.
Tools that can be used to support color accessibility may include:
- Patterns, fills, & textures (e.g., solids vs. stripes or dotted line vs. solid line)
- Symbols (e.g., add an asterisk, checkmarks or X’s)
- Adding text labels & cues
- Underlining, bolding, or italicizing text
- Changing typeface
- Increasing or decreasing font size
- Adding or changing shapes (e.g., a square becomes a circle)
Common cases where color is used to convey information & alternatives
Charts & Graphs
Color is useful in pie graphs, bar graphs, and other data visualizations to indicate different categories of data. When using color in a chart or graph, it’s best practice to use different tones of the same color (i.e., three different shades of blue rather than red, green, and blue) to ensure that the colors appear different if converted to black and white. Common supporting visual cues for charts and graphs include different fill patterns and text labels for each category of data.
Menus
Color is often used in menus to communicate where a user is currently “located” in a site or which menu item has been selected by the user. Common supporting visual cues here include adding an underline or an outline to the relevant item.
Buttons & Links
Color changes are often used in buttons and links to convey hover states and focus states (i.e., which item is about to be selected by the user if they click their mouse or hit “Enter” on their keyboard). They are sometimes also used to communicate visited states, or which buttons and links were previously selected by the user.
The presence of a link is usually communicated by using an underline and a different text color from the body text. To maintain good UX, you should keep your links underlined. Therefore, changes in the typeface itself could communicate a focus, hover, or visited state (e.g., all caps, bolding, or italicizing the text).
Users don’t expect button text to be underlined, so that would be a great way to communicate a state change. You could also add text elements like brackets, or change the shape of the button itself.
Error Messages
Form fields are often outlined in red to communicate an error, such as a mismatched username and password or an empty required field. Adding asterisks or warning symbols are common ways to communicate error messages. To go a step further, consider adding text that explains the error and how to correct it.
Support Color Differences with Visual Cues
Color can be an effective way to communicate information for those who are able to perceive it. But to ensure the most impactful user experience for everyone, WCAG requires that there are additional visual cues to support color differences.
Need help identifying areas to improve your website’s usability? Contact us today to learn more about our accessibility audit.
