Website Accessibility Guide

1.4.11 Non-text Contrast

Written by MCS Accessibility Team | May 18, 2020 1:00:00 PM

Understanding 1.4.11 Non-text Contrast

Criterion 1.4.11 Non-text Contrast states that an item (like a link or essential graphic) can be easily distinguished from its surrounding text with a 3:1 color ratio. Often designers will make hyperlinks a different color with no other differentiating factors. This does not meet the criteria, as users who are colorblind or low vision may not be able to distinguish the link from the plain text.

Graphics that are essential to explaining content must also meet these guidelines, and must be distinguishable from the area around them (e.g. a logo or text on an infographic).

How HubSpot Helps

HubSpot’s default CSS automatically applies an underline to links. Untampered with, this meets the minimum criteria. However, HubSpot natively does not have any tools to ensure graphics meet the 3:1 standard.

Warnings

When designing your site, try to be mindful of adjacent colors and those used to establish visual boundaries of controls, such as buttons, inputs, checkboxes, and radio buttons. This includes on focus indicators.

This criteria can be easily solved manually as well, if you ensure that your default link and essential graphic styles observe a 3:1 contrast ratio. Use this contrast tool to check your ratio.

Related Success Criteria