Making Your HubSpot Website WCAG 2.1 Compliant

1.4.1 Use of Color

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.

LEVELA
Success Criteria

1.4.1 Use of Color

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

Color is not used as the only visual means of conveying information, indicating an action, prompting a response, or distinguishing a visual element.

Note 1: This success criterion addresses color perception specifically. Other forms of perception are covered in 1.3 including programmatic access to color and other visual presentation coding.

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.1 Use of Color

Color is an important part of the visual process. It sets the tone for a website and provides emphasis to various design elements. 1.4.1 Use of Color requires that color is not the only way information is communicated, to ensure users with any level of color deficiencies are able to differentiate between or identify visual elements. 

There are many visual aids that rely on color to communicate information. For example:

  • Required form fields highlighted in blue
  • Warning messages differentiated from other text in red
  • Charts with color coded results, e.g.: Mary's sales are in yellow, Tom's are in green.

For some users, these visual cues may not be enough. This includes people with:

  • Colorblindness
  • Partial colorblindness
  • Partial sight (often causes limited color perception)
  • Color perception degradation due to old age

The Use of Color criteria doesn't prevent utilizing color for emphasis. The requirement simply calls for secondary identifiers alongside color that would enable users with color perception difficulties to make the necessary differentiations requested by that element.  

Color is not used as the only visual means of conveying information, indicating an action, prompting a response, or distinguishing a visual element.

How AudioEye Helps

AudioEye offers a whole set of tools to adapt the coloration of a page.

The Visual Toolkit made available from the AudioEye Accessibility Toolbar allows a user to adjust the color of the webpage with the Contrast tool, 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

Another free assistive tool provided by AudioEye tool that offers benefits related to may assist with this criteria is called Reading Guide, which changes the presentation of a user interface component when it receives cursor focus. As a visual user mouses over content, the hovered content is emphasized, while the surrounding content is de-emphasized.

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

Here are two examples:

  • Forms: Many forms have fields that are required in order to be submitted. If a required field isn't filled out, the field displays a warning. Sometimes, this is achieved by highlighting the border of the required field in red. If this is the only way the warning is displayed, people without the ability to see color will not recognize the warning. Be sure to include a secondary text cue, like a message stating, "This is a required field."
  • Diagrams & Graphs: Diagrams and graphs often rely on color as a primary way of communicating information. A pie chart, for example, will use a different color or hue for each slice. Someone who has difficulty differentiating between colors would not be able to make out the data unless there is a second means of communicating the information. This can be achieved by using patterns or labels, in addition to the color differentiation.

For more information, please visit the official W3C article: Understanding 1.4.1 Use of Color


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