Making Your HubSpot Website WCAG 2.1 Compliant

1.4.3 Contrast (Minimum)

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.3 Contrast (Minimum)

  • 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 text and images of text has a contrast ratio of at least 4.5:1, except for the following:

  • Large Text: Large-scale text and images of large-scale text have a contrast ratio of at least 3:1;
  • Incidental: Text or images of text that are part of an inactive user interface component, that are pure decoration, that are not visible to anyone, or that are part of a picture that contains significant other visual content, have no contrast requirement.
  • Logotypes: Text that is part of a logo or brand name has no minimum contrast requirement.

View Official WCAG 2.1 Compliance Techniques

  • This criteria is completely resolved with accessiBe or HubSpot.

Understanding WCAG Success Criteria 1.4.3 Contrast (Minimum)

This success criteria aims to ensure visitors with low vision can perceive text content on a color or image background with an acceptable level of contrast.

For bolded text 14pt and lower, or unbolded text 18pt and lower, conformance to this guideline calls for a minimum contrast ratio of 4.5:1 for text and images with text.

For bolded text greater than 14pt, or unbolded text greater than 18pt, conformance to this guideline calls for a minimum contrast ratio of 3:1 for text and images with text.

Not sure how to do the math and determine your text elements' contract ratios? Check out Colorable, a simple tool to calculate contrast ratio. 

 

 Bad-Ratio

A. Contrast Ratio = 3.52

 Good-Ratio

B. Contrast Ratio = 9.22

There are some exceptions to this guideline, including logo type, text that appears in an image and is not the primary purpose of that image, and text used purely for decoration.

 

How accessiBe Helps

Provides a Means of Increasing Contrast

accessiBe solves this by offering “light contrast” and “high contrast” options. These place text over a dark or light background and adjust font colors to maximize contrast, and therefore, legibility. 

Accessibe-Widget-Highlighting-Low-Contrast-and-High-Contrast-Options
 
Provides a Means of Changing Background & Font Colors

accessiBe enables visitors to change text, title and background colors, all within their accessibility widget. This gives visitors the ability to customize the site to satisfy any visual handicap they may have.

Accessibe-Widget-Adjust-Colors-Options

 

Warnings 

For images covered by text, it's recommended designers place HTML text over background images so it is adjustable. This ensures the user can control the text size and color independently of the background image. When doing so, it's also best to declare a background and foreground for these elements. This ensures accessibility software (user agents) are adjusting the proper aspects.

If the text must be included in the image, ensure the image is high enough resolution to prevent significant pixelation if scaled up.

For more information, please visit the official W3C article: Understanding 1.4.3 Contrast (Minimum)


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