Color is frequently used to improve design and convey information. Some users have partial or complete colorblindness, an inability to distinguish between certain sets of colors, or an inability to see colors entirely. To ensure accessibility, digital content must have:
- Sufficient color contrast
- Use visual indicators other than color to indicate functionality.
Color Contrast
Guidelines
Text needs to contrast sufficiently against the background to be easy to read.
Color contrast is defined as a ratio between two colors, with higher contrasts being more accessible. The Web Content Accessibility Guidelines state that the contrast ratio between two colors must be at least 4.5:1 for standard sized text, and at least 3:1 for large text and other types of content, like UI controls or essential graphical elements.
The default University of Oregon yellow and green colors do sufficiently contrast against each other, but many other combinations of university colors do not. For a chat showing which combinations of brand colors do and do not meet contrast requirements, visit the UO Color Contrast page.
How to Test
There are a variety of web-based tools for manually testing color contrast, such as the WebAIM Contrast checker, as well as downloadable tools, such as TPGi's Colour Contrast Analyser. In the event the current color choices are not sufficiently contrasting, some tools provide the ability to quickly adjust how light or dark the colors are to help find a combination that works.
Automated testing tools like WAVE also test for color contrast violations on the page. These tools test against solid color backgrounds only, and are unable to identify color contrast errors in patters, gradients, or background images or videos. Manual testing is the only way to reliably test color contrast.
Color as a Source of Information or Differentiation
Guidelines
Color cannot be the sole identifier of functionality or state on a website. It may be used to indicate functionality, but there must also be some other visual cue.
For example, indicating links via color alone (e.g., blue link text vs. black non-link text) is not sufficient. Using color and underlining to indicate links is sufficient, because color is not the only thing differentiating links from non-link text. Likewise, changing a label to be red to indicate that there is an error in a form is not sufficient on its own.
This guideline also applies to images. The following chart is inaccessible, because it uses color alone to indicate information - both data lines are solid, and color is the only differentiator.
By changing the line styles so that one is dashed and one is solid, and adding different markers at each data point, there is an alternate way of associating each line with the respective label in the legend. Color can be used in graphs, as long as there is another visual differentiator provided.
How to Test
Manually review the content and verify that color is not the sole indicator of functionality. If anything requires color to differentiate it, to convey information, or to indicate