Website Accessibility Guide Home

1.4.11 Non-text Contrast

MCS Accessibility Team

MCS Accessibility Team
Last Updated July 23, 2020

The following directions are part of a full step-by-step guide to making a HubSpot website WCAG 2.1 AA compliant. These recommendations are intended for websites managed on the HubSpot CMS but can be adapted for other content management systems.

LEVELAA
Principle: Perceivable
Information and user interface components must be presentable to users in ways they can perceive.
Guideline: Distinguishable
Make it easier for users to see and hear content including separating foreground from background.

The visual presentation of the following have a contrast ratio of at least 3:1 against adjacent color(s):

  • User Interface Components: Visual information required to identify user interface components and states, except for inactive components or where the appearance of the component is determined by the user agent and not modified by the author;
  • Graphical Objects: Parts of graphics required to understand the content, except when a particular presentation of graphics is essential to the information being conveyed.

View Official WCAG 2.1 Compliance Techniques

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

For more information, please visit the official W3C article: Understanding 1.4.11 Non-text Contrast

Next Article: 1.4.12 Text Spacing

Questions?

Let us know if we can help you address this specific WCAG Recommendation.