Making Your HubSpot Website WCAG 2.1 Compliant

1.4.11 Non-text Contrast

MCS Accessibility Team

MCS Accessibility Team
Last Updated November 09, 2019

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. All suggestions in this guide are in conjunction with the accessiBe solution and require an active license. For more information on the accessiBe platform and pricing, you can learn more here.

LEVELAA
Success Criteria

1.4.11 Non-text Contrast

  • Resolved
  • Partially Resolved
  • Manually Managed
  • N/A - Level AAA
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

  • This criteria is completely resolved with accessiBe or HubSpot.

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. This is where accessiBe can assist.

How accessiBe Helps

accessiBe has a number of different options that assist with this criteria such as emphasize links and multiple contrast options. The contrast options are also what will adjust the contrast on graphics, helping satisfy that aspect of the criteria. 

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


Download the WCAG 2.1 Compliance Checklist

What to expect if you download this checklist

Video: What to Expect If You Download this Checklist

Checklist Download

Questions?

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

Recent Morey Creative Studios Blog Articles