Posted on

WAVE Features: The Contrast Panel

WAVE - Contrast Panel

Summary: This post is part of series that dives deeper into the WAVE tool’s features. The focus of this article takes a closer look at the Contrast Panel.

Contrast Errors

Inadequate color contrast is a violation of WCAG success criteria 1.4.3., “The visual presentation of text and images of text has a contrast ratio of at least 4.5:1” (Source: WCAG 2.1).

Two good places to start to learn more about Contrast errors are:

The WAVE Contrast Panel contains multiple reporting and analysis features to identify contrast errors on a Web page.

 The Contrast Panel

The Contrast Panel is opened by using the “Contrast” button (one of the Display Options), located right above the Content Panel.

The Contrast Panel allows you to:

  1. View Contrast Errors Details
  2. Access the Embedded Contrast Checker
  3. Desaturate and Resaturate the Web Page

 

View Contrast Errors Details

If there are no contrast errors detected you will see the message, “No contrast issues were detected.” If contrast errors are detected, their details are presented in the same way other error details are presented in the WAVE Sidebar Panel. The details include: the number of contrast errors on the page, has a link to icon index for documentation on Contrast Errors, and includes an icon for each specific instance of a detected contrast error on the page. Users are able to click on each of these icons and navigate to the tethered spots of the exact instance of this error on the Web page or in the Code Tab. This allows users to further explore why it is a contrast error.

What WAVE detects as a Contrast Error

The following is included in the WAVE documentation about what is detected as a contrast Error:

“Text is present that has a contrast ratio less than 4.5:1, or large text (larger than 18 point or 14 point bold) has a contrast ratio less than 3:1. Elements with background images must have a background color defined that provides adequate contrast when images are disabled or unavailable.”

It is important to be aware that the Contrast Checker doesn’t scan images, or account for background images or gradients that appear behind the text. Additionally, even if there is adequate contrast between the text and a background image, the checker will still flag it as an error if the text and the base background color don’t have adequate contrast. Not having adequate contrast between the base background color and the text is problematic in those instances where images fail to load, or when users disable images.

Images that convey information might contain contrast errors, but these must be manually inspected for contrast errors. For more information on this topic, I recommend WebAIM’s article on accessible images.

Access the Embedded Contrast Checker

The WAVE contrast panel includes an embedded Contrast Checker. This contrast checker is a handy tool to use as a stand-alone product or it can be used to further explore any contrast errors detected in the scan.

You can put in the HTML (hexadecimal) color codes for different Foreground and Background colors and have it check for conformance with WCAG AA and AAA success criteria levels for both normal text and large text.

It also has a slider to lighten or darken the color and a color picker. The WCAG pass/fail tests update automatically as the color is changed (including lightening and darkening). This allows users to test not only current color schemes but also alternative colors.

Desaturate Page/Resaturate Page link

Located at the bottom of the Contrast Panel is the “Desaturate page” link that when activated desaturates the page.

In Desaturation mode, you can see what the world (or at least the World Wide Web) looks like without color. Go ahead, grab some URLs and plug them in and see what happens. This can be a fun thing to do but also very informative about the Web page’s accessibility for people who might not be able to distinguish different colors or shades of colors from one another. The Desaturation of a page can help identify places were color contrast might be an accessibility issue.

To resaturate the page, you simply click on the “Resaturate page” link that replaces the previous “Desaturate page” link, located at the bottom of the Contrast Panel. Or, you can simply navigate away from the from the Contrast Panel, or out of the tool.

Useful Links


Pope Tech is partnered with WebAIM and uses the WAVE tool’s engine to analyze content for web accessibility. If you are interested in site-wide accessibility scanning, schedule a Demo.