Styles for Checking Color Reliance

There are two primary accessibility issues that can be introduced by using color in web pages. First, you must ensure that there is sufficient contrast between foreground and background colors. Second, you must ensure that color is not the only means of conveying content or information.

Poor color contrast can affect everyone with vision, but has a particular impact on users with low vision. There are many tools to check for color contrast issues, such as WebAIM’s Color Contrast Checker.

Relying on color to convey content will impact blind users (page colors are not identified by screen readers), users with low vision who may override page colors, and users with color vision deficiency (or color blindness) who may have difficulty differentiating between certain colors. Checking for color reliance can be difficult and cannot easily be automated. Removing color information from the page so that it appears in grayscale allows an evaluator to more easily identify content that relies on color. We have long suggested that printing the page on a black and white printer is a good, though not particularly environmentally friendly, way to detect color reliance. Viewing the page in grayscale can also help you identify poor color contrast.

Styles for Desaturation

To make checking for color reliance and potential contrast issues easier, I put together a basic CSS file that will desaturate your entire web page to make it appear in grayscale. Simply add the following to any web page to try it out:

Preview the desaturation styles on this page (JavaScript required).

Style Details

The following CSS3 style will apply a grayscale filter:

Most modern browsers implement CSS3 via vendor prefixes, and some don’t yet support CSS3 filters, but by declaring the prefixes, using an SVG file, and a proprietary filter for Internet Explorer, the following should work in all major browsers.

The SVG file must be referenced appropriately. It is of note that the results are sometimes a bit odd in IE. These styles were primarily derived from this article.

Hopefully this will be a useful resource in your accessibility evaluation of color.