When designing content, it is important to consider the perceived contrast of text or graphical elements against their background.  Text with a low contrast ratio can be difficult to read and may cause issues with eye strain or reader fatigue.

The Web Content Accessibility Guidelines (WCAG), defines a minimum contrast ratio of 4.5:1 for regular text, and 3:1 for large text. For most textual content, black or dark gray text on a white background has a sufficiently high contrast ratio. For instance, the text within this blog has a ratio of 11:1, far surpassing the minimum threshold.

Care should be taken when changing font colors. Here are some examples of text color combinations and their ratios against a white background:

• Low contrast gray text Ratio: 1.3:1
• Sufficient contrast gray text Ratio: 4.6:1
• Low contrast blue text Ratio: 1.9:1
• Sufficient contrast blue text Ratio: 6.1:1
• Sufficient contrast red text Ratio: 5.6:1

Additional care should be taken when altering background colors. Generally, including a background of the same color type will create contrast issues and should be avoided. Here are some examples of low contrast content using the sufficiently contrasted colors from above:

• Low contrast gray text on a gray background text Ratio: 2.1:1
• Low contrast blue text on blue background Ratio: 2.6:1
• Low contrast red text on red background Ratio: 1.5:1

When designing graphical content, such as flyers or website layouts, it can be challenging to ensure sufficient contrast when placing text over an image. To do so, you can use design elements such as text shadows or text outlines, as we have done on our district page.

By including a text outline, we are able to display white text over a complex, and occasionally white background.

Low contrast text is generally apparent to a content author, but these tools can help to check the contrast ratios of your content:

• Colour Contrast Analyser – Works for both Mac and Windows and can check contrast across multiple applications.
• Color Contrast Analyzer – Google Chrome extension that visually displays the perceived contrast of content. Useful for designing web content.

If you have questions about using these tools or ensuring the contrast of your content is sufficient, please feel free to reach out to the Communications Department.