Website Accessibility Guide

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.

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

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. 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.

How HubSpot Helps

HubSpot’s default CSS in most scenarios codes an underline for links. Untampered with, this meets the minimum criteria.

How accessiBe Helps

acessiBe has a number of different options that help a user emphasize a link and change contrast, such as focus settings, outlines, and contrast adjustment tools.

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.

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


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

Recent Morey Creative Studios Blog Articles