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):

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?

  • 1
    Do text-only screens still exist? Mar 18 '15 at 9:54

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.

  • Do you distinguish between "color" and "brightness" here? Because you recommend "not to use color as the only means" which is violated in the example (blue vs. white), while you conclude "there should not be a problem". Shouldn't you use "hue" instead of "color" here? (Just for my own peace of mind - I'm still grappling with these terms.) Mar 18 '15 at 7:58
  • I agree, you could say that. the main point is not to have variations of hues/colors as the only factor to distinguish between data. Here with introduction of white, there is a factor of luminosity which aids in distinction from blue, and hence it is okay to use the same.
    – Sol
    Mar 18 '15 at 8:12

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


Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.