Color is used in a wide variety of ways within documents and other materials. Color is a great way to convey different types of meaning in different ways. However, when color contrast is not considered, it can present a barrier to access for many individuals.
Color is frequently used in a document for style and structure. Using colors in headings or formatting text makes it stand out. There is a wide range of different uses for style and structure. Importantly, some of these uses can either explicitly or implicitly convey meaning. When color is used to convey meaning, it is important to ensure that people who may have difficulties related to perceiving color contrast can still access the meaning in the content you are creating.
Tips for Ensuring Effective Color Contrast
- Ensure high color contrast between text/images and background – High contrast is critical when thinking about accessibility. According to the Web Content Accessibility Guidelines (WCAG), compliance at level AAA requires at least 7:1 color contrast for normal text and at least 4.5:1 for large text. These should be checked prior to publishing content using an internal checker or a color contrast checker (see below).
- Avoid the use of color alone to convey meaning – When it comes to using color, multiple representations are best. For example, rather than just using color to distinguish between two bars on a data table, you could use color as well as a different pattern. These two representations would help ensure that people could access the content in multiple ways.
- Avoid using green with red – While green and red might be complimentary colors, they should not be used together in your designs. Many people who are color blind cannot distinguish between green and red so combining these colors can be highly problematic.
- Avoid backgrounds with complicated patterns or designs – Things like background images can have a significant impact on accessibility. It is generally best to have either no background or a solid background. This increases the color contrast and readability of the text.
- Check color contrast with a color contrast checker - There are a wide range of color contrast checkers that can be used. One great checker is: WebAIM – Contrast Checker.
