Design

Accessibility: Color Contrast

Importance

For those living with disabilities, consuming web content can be a daily challenge. The web is an increasingly important resource in life today. By making your website accessible you are ensuring that all of your users, including those with disabilities, are able to access your site’s information. One of the most common roadblocks to accessing web content can be the lack of proper color contrast. Approximately 7% of the male population (10.5 million men) and .4% of females in the United States live with color blindness[i]. Having poor color contrast can make reading web content difficult and even impossible. Creative and design teams should ensure that the proper color contrast for text, tables/diagrams and other content that is provided.

 

Color Contrast Requirements

For web content accessibility requirements we look to WCAG (Web Content Accessibility Guidelines) for guidance. WCAG 2.1 has 3 success criteria related to color contrast. What follows is a brief description or each of these success criteria with link to reference the technical requirements and additional information.

1.4.3 Contrast minimum (Level AA): All text must have a minimum color contrast of 4.5:1, with exceptions.

1.4.11 Non-text Contrast (Level AA): User interface components and graphical objects must have a color contrast ratio of at least 3:1

Covid 19
COVID-19: Digital Insights For Enterprise Action

Access Perficient’s latest insights into how you can leverage digital technologies to not only respond to the pandemic, but drive your operations forward and deliver experiences your customers need.

Get Informed

1.4.6 Contrast enhanced (Level AAA): Similar to 1.4.3 but higher standard. All text must have a color contrast ratio of at least 7:1

 

Testing for color contrast

There are a number of accessibility testing tools available that will help you test the color contrast of your web content. For instance, the automated accessibility tool Axe will, among other things, test for color contrast. Axe works to identify the hex codes of the text and the background and examines the color contrast ratio between the two. However, in some instances a manual review of color contrast is required. This is the case when an automated tool, like Axe, is not able to extract the exact hex codes for the text or background. A typical example of this is when text is placed over an image. In these instances, it is required that a tester manually checks the color contrast between the text and the background image.

 

Manual Color Contrast Analyzers

Webaim Color Contrast Checker

 

TPG Colour Contrast Analyzer

[i]https://iristech.co/statistics/#:~:text=In%20the%20United%20States%2C%20about,differently%20from%20how%20others%20do

 

About the Author

Brendan is a senior business consultant at Perficient for 4 years. His work has focused on accessibility testing and aiding developers in their accessibility efforts.

More from this Author

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Subscribe to the Weekly Blog Digest:

Sign Up
Categories