Color Contrast

Color can play a significant role in the overall readability of a document. First, the use of neon or pastel colors makes content challenging to read with someone who has low vision and/or a degree of color blindness. Additionally, the viewer will be placing a constant strain on the eyes to read the content. Secondly, if colors are used to place importance on instructional materials i.e. which section is highlighted in red, captions or alternative text should be included to note the significance of the colors.

Color Contrast

When using color, it is important to have sufficient contrast between two colors: the background color and foreground color. Low contrast colors will make it difficult for visual users to read and/or understand the content (text or images of text) on the page. Color contrast guidelines indicate that there should be at least a 4.5:1 ratio between the foreground content and the background content. However, this guideline is not applicable if: 

  • The content is large. If the text is large enough to exceed 18 pt. font size or 14 pt. font size if bold, a contrast ratio of 3:1 can exist. 
  • The content is decorative 
  • The content part of a logo or wordmark 

Bad Example of Color Contrast

Bad Example of color contrast.

In the example below the Colour Contrast Analyser tool is used to test the foreground color (black text) against the background (purple). This pairing fails the WCAG 2.1 guidelines at all levels with a contrast ratio of 1.5:1. People who have low vision or colorblind could encounter some difficulty distinguishing text color from a background color if the contrast is insufficient contrast ratio 1.5:1. The minimum contrast ratio of 4.5:1 for large text 18 point or 14 point bold. 

Good Example of Color Contrast

Good Example of color contrast.

In the example below the Colour Contrast Analyser tool is used to test the foreground color (black text) against the background (orange). This pairing passes the WCAG 2.1 guidelines with a contrast ratio of 8.7:1. The contrast is sufficient for those who have color deficiencies.

Example of Good and Bad Color Contrast

Example of Good and Bad Color Contrast.

This is an example of good and bad pairings of different colored text on different colored backgrounds.

 

Download free Colour Contrast Analyser (CCA) checker tool.