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.

LEVELAA
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

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.

Recommended Solutions

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)


Questions?

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