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?