This article continues our series looking at website accessibility. We will be looking at a relatively new addition to the accessibility guidelines – non-text contrast; another criterion under the Web Content Accessibility Guidelines “Distinguishable” guideline. This criterion provides a minimum contrast for graphics – “active user interface components” and “meaningful graphics” (we’ll look at what those terms mean very shortly) with the objective of ensuring that people with certain visual impairments can still understand the controls or graphics without needing to use assistive technologies.
What exactly are “active user interface components” and “meaningful graphics”?
- Active user interface components are controls that the user can interact with. It does not include inactive/disabled controls
- Meaningful graphics can be either stand-alone icons (without text) or the parts of larger diagrams/graphics that a user must be able to discern in order to understand the information being presented
The rules applied are the same for both UI controls and graphics, a minimum contrast ratio of 3:1 with adjacent colours is required.
To guarantee the appropriate contrast you must remember to set all the colours involved explicitly because you cannot presume how your user has their default browser colours configured.
It’s worth noting that if you cannot provide sufficient contrast in the default styles for your website, if you include a control to switch to an alternate style that does offer enough contrast, the criterion considers that acceptable. That control does always have to meet the contrast requirements.
We’ll look at what this means for controls and graphics in a bit more detail.
User interface components
We require:
- A control to have sufficient contrast against adjacent colours for the user to be able to identify its presence
- Any visual information required to understand the state of the control have sufficient contrast against adjacent colours. A particularly important (and often overlooked) state is the focus state
We do not require:
- That different exclusive states of a control contrast with one another
- That controls have a visible boundary/border, though in many cases that might be beneficial
- That inactive/disabled controls meet this contrast requirement, though it would likely be beneficial (it is excluded because a general guideline has been hard to establish)
Graphical objects
We require the meaningful parts of icons/graphics to have sufficient contrast against adjacent colours. Note that an icon or graphic may have several parts that each contribute to the meaningfulness – each part must sufficiently contrast against its adjacent colours.
We do not require the following to meet these contrast requirements:
- Graphics that have an accessible equivalent (e.g. textual/tabular)
- Purely aesthetic graphics
- Logos
- Flags
- Pictures of real-life scenes
- Graphics that can’t be presented in any other way due to some valid constraint
Calculating and checking contrast
There are many tools available for you to check your contrast ratios. A simple and popular one is the WebAIM contrast checker, just paste in the adjacent colours you want to check and it will tell you if it passes the AA criteria for “Graphical Objects and User Interface Components”.
Because of the subjectivity and complexity of non-text UI components, most automated accessibility checkers will struggle to highlight any contrast issues, so it’s essential you check the contrast yourself.
Find out more
If you’d like to find out more, see the Understanding Success Criterion 1.4.11: Non-text Contrast. There’s a lot of useful guidance there for this criterion. Or you can read the previous article in this series here, which examines how to add an additional attribute for input fields which collect data about the user who is filling in the form.