Do colour differences which also carry major brightness differences fail WCAG 2.0 SC 1.4.1: Use of Color?

Question

I've run into a conundrum with WCAG 2.0 Success Criteria 1.4.1: Use of Color whilst assessing an internal project for WCAG Level AA compliance.

Among my assessment, I'm assessing controls that provide an indicator based on colour that heavily contrasts with the surrounding elements in terms of brightness. Those controls are the following (screenshots are from Bootstrap):

• Pagination, implemented with Bootstrap's pagination component, where the active page is indicated only by colour (I think):

  

• Filters, which are based on Bootstrap's button groups, where the active/chosen filter is indicated by colour:

  

All of these elements also have various Aria attributes added (e.g. aria-selected), but that's of little relevance to someone not using assistive technology.

The Crunch: Do these pass or fail Success Criteria 1.4.1: Use of Color?

Is this enough to indicate what the active page is, and what the active filter is?

By the letter, these just have a different colour, so I think these fail. It's like their given example of "Mary's sales are in red, Tom's are in blue", except it's unselected in white, selected in blue.

However, these elements also have massive contrast differences, and even someone who's completely colourblind will see that one control is darkened. That satisfies everyone except:

• People using text-only, limited color, or monochrome displays may be unable to access color-dependent information.

... but I'm not sure what these people would truly see, and what would be useful to them if a lot of information is being discarded anyway.

Do we need to add more, like an arrow or a dot to the selected page and filter, or another heading saying e.g. "Page 1:" or "To do:" which carries an obvious indicator of which thing you're seeing, or is it enough to have this difference as the indicator?

Answer 1

A quick Google search led me to this informative article about colorblindness. You might want to have a look at UX Question, Testing for Colorblind people This will give you resources to make sure you are taking care of color deficiencies. In addition to this question, there are chrome extensions (like Spectrum, see) to simulate color deficiencies.

The basic idea is not to use color as the only means of showing distinction. This problem is more amplified when different colors are used to show some sort of distinction. More than one color might reduce to grey-scale for those with color deficiencies and hence make it hard to discern the difference you are trying to show.

As of your UI is considered, if you are using a single color along with white, then that is going to reduce to a grey-scale still offering visual cues for users to differentiate between stuff on your site. If in future you chose to include some other color, for say disabled links, secondary buttons etc., then you'd need to make sure that the active and disabled colors you are using are not reduced to same level of grey. The tools mentioned above will help you deduce that.

Currently with a single color palette, there should not be a problem.

Answer 2

I recognize this is a very old question, but it popped up high in a search and it is a question the people still have today, as it is an area of misunderstanding.

Short Answer

WCAG 2.x 1.4.1 "color" refers to hue/chroma/saturation, and is separate from achromatic luminance contrast (as defined in 1.4.3).

Longer Answer

The human vision system processes luminance (achromatic lightness/darkness/brightness) separately from color (by which we mean hue/chroma/saturation).

The luminance processing (in V1 of the visual cortex) is responsible for things like edge detection, contrast, and fine details.

The hue/chroma processing happens in V4 and V8, and is 1/3rd the resolution of the luminance channels, and 1.3rd the strength of luminance contrasts.

Color Vision Deficiency

Color insensitive vision (inaccurately called "color blind") has otherwise standard contrast sensitivity. This is important for readability. The one exception is that red on black is a problem for the protan, as they see red darker, and therefore have a luminance loss for red (only). As most of luminance is green however, and protan photoreceptors (M cones) peak in green, the remainder of their contrast sensitivity is equivalent.

Luminance contrast is what is needed for readability. But discrimination is another matter.

Discrimination

Where color insensitive have functional difficulties is in identifying some colors from each other. This is the genesis of SC 1.4.1, which stipulates that color (hue/chroma) is not the SOLE differentiating characteristic.

Ensuring there is at least a luminance difference can satisfy this, though other differentiating characteristics (symbols, dotted vs solid lines, etc) are further helpful.

In your examples though, the active page is shown not only with color but also substantial luminance. Solid dark blue vs white is definitely not a color-only differentiation.

Other Misunderstandings

Here's another example I like to use, which highlights the misunderstanding surrounding color vision.

It is often said that deutan and protan are "red/green blind" but this is a gross oversimplification. Take a look at this example simulation.

In this example of simulations of different kinds of color vision, The red patch is #f00, green is #0f0, and yellow is #ff0.

We see StandardVision in the upper left, and clockwise deutan which is deficient in the M or green cone, protanopia which is missing the L or so-called Red cone and then tritan, missing the S blue cone.

Notice deutan & protan see red and green distinction through the natural luminance difference of red & green, but as green is the vast majority of luminance, green and yellow are difficult to distinguish.

"Make it right in black and white"

This old adage was that a good functional design looks good and is useable when reduced to an achromatic greyscale. Again this is an oversimplification, but still a useful metric to abide by.

CVD Simulator

The free Myndex Color Vision Deficiency Simulator is a clinically accurate simulator (Brettel model) where you can process a screenshot of your design to see how it looks for various CVD types. Included simulations are the very rare achromatopsia (except the low vision component), and also a "standard vision greyscale" reduction.

www.myndex.com/CVD/

Answer 3

Since the contrast difference is high, for users with regular screens, I think the format you are using should be OK.

If you are going for full accessability, for text-only displays you'd probably need a text-only formatting like [Active] Inactive Inactive, for audio readers (blind users) you may need text saying "option 1 is active" (perhaps using a 0-size image with alt text).