When implementing web design and creating web content, we must carefully consider the use of colors. Our color choices impact our users, who may be color blind, have low vision, or some other color-visual impairment.
Color Contrast
Color contrast refers to a calculated ratio of the difference between foreground and background colors. For instance, Michigan Tech's header uses a black background (hex code #00000) and yellow links in the foreground (hex code #ffcc00). The calculated color contrast ratio is 13.89:1.
Michigan Tech has chosen to implement WCAG 2.0 level AA conformance for color contrast ratios. We must achieve a contrast ratio of 4.5:1 for normal sized text (standard links, body copy, etc.) and 3:1 for large text. Large text is defined as:
- Bold font weight with an 18px or larger font size, or
- 24px or larger font size
We must have contrast between our page elements, such as links and buttons, so that users with low vision can still see and interact with them.
Testing Color Contrast
Developers and designers can test their own color contrast ratios by using WebAIM's color contrast checker or by using other free tools:
- WAVE webpage tester
- Luminosity Colour Contrast Ratio Analyser
- The Paciello Group: Colour Contrast Analyser
If your page elements do not pass the AA level for color contrast, you must increase the difference between the lightness of the background compared to the darkness of the foreground or vice versa.
Using Color to Communicate
Using color as a communication tool on your website is not necessarily bad. However, it is important to avoid using the perception of color as a sole means of communication.
Using Color to Indicate Function
Avoid relying solely on color to indicate function. For example, links are traditionally indicated in blue. However, if someone cannot see the color blue, they would not be able to distinguish links. To ensure that your links are accessible, also include an underline or another formatting adjustment that stands out, independent of color.
Exceptions
Although it is encouraged to avoid using color as a sole indicator of function, there may be some exceptions. For example, if you have links in a standard location, such as a website footer, it may be OK to only use color to distinguish the links in that area. Having a large list of underlined links may make the text difficult to read; also, it is often assumed that lists in web footers are clickable links, regardless of the design.
Using Color to Indicate Meaning
Avoid relying solely on color to indicate meaning. For example, it is popular to denote the difficultly level of ski trails by color. Generally, green indicates easy trails, blue for mediumly difficult trails, and black is reserved for most difficult.
If someone with a visual disability tries to read a webpage listing trail difficulty ratings based only on color, they would not be able to distinguish which ski trails are best suited for their skills. In this example, ensure that difficulty ratings are accessible by also including a different shape for each level. Green trails could be denote by a green circle. Blue trails by a blue square. Black trails by a black diamond. Each rating has a different shape in addition to a different color.
Images and Color
You do not typically need to include any information about colors in the alternative text or ALT text for the decorative images on your website. However, if you are using images to provide an indication of function or meaning, you must include the color and/or meaning within the image's ALT.
If you use an image of a green circle to indicate that a ski trail you are describing is rated as an easy trail, then the ALT text for that green circle should be "green circle" or "green circle, easy" so that screen reader users know what is being communicated.
Learn More
To learn more about the principles of using color on websites:
- Accessibility and Usability at Penn State: Color and Contrast on Web Pages
- WebAIM: Color Contrast Checker
- W3C: Use of Color
Modern Campus CMS
University Marketing and Communications assures that all global elements (headers, footers, etc.) and standard CMS widgets follow color use guidelines in an accessible manner. However, if CMS users change the color of any content or implement any designs on their own, they are required to follow the above guidelines and perform their own tests for compliance.