Making Your HubSpot Website WCAG 2.1 Compliant

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. In addition to explaining the WCAG Success Criteria and how to address them, this guide also describes how the AudioEye Managed solution may address each issue.

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 consistently resolved with AudioEye Managed.

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 AudioEye can assist.

How AudioEye Helps

The Contrast tool in the Visual Toolkit made available from the AudioEye Accessibility Toolbar allows a user to adjust the color of the webpage based on several pre-configured color contrast schemes, which are optimized to accommodate varying types of color blindness.

Screenshot of AudioEye Visual Toolbar with contrast selected

Another free assistive tool provided by AudioEye is called Emphasize, which changes the presentation of a user interface component when it receives tab focus. As a user tabs from one focusable element to the next, the visual focus is clearly conveyed. 

Screenshot of AudioEye Visual Toolbar with emphasize selected

Warnings

The AudioEye Visual Toolkit can adjust the formatting of a website, but it is not intended as a replacement for making the necessary visual improvements that help ensure an optimal visual experience for individuals with disabilities. AudioEye collaborates with Managed customers to assist them in identifying and understanding visual accessibility issues. 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


Download the WCAG 2.1 Compliance Checklist

Checklist Download

Questions?

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

Recent Morey Creative Studios Blog Articles