Making Your HubSpot Website WCAG 2.1 Compliant

1.4.3 Contrast (Minimum)

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.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 partially resolved and/or detected with AudioEye Managed but may require some manual intervention and/or collaboration with AudioEye.

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

 Screenshot displaying a failing contrast ratio

A. Contrast Ratio = 3.52

 Screenshot displaying a passing contrast 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 AudioEye Helps

The Contrast tool from 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 schemas, which are optimized to accommodate varying types of color blindness.

Screenshot of AudioEye Visual Toolbar with contrast 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 elements that rely exclusively on color to attract users' attention.

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


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