In our post on WCAG 1.4.3: Contrast (Minimum), we discussed the concept of color contrast ratios and WCAG’s corresponding requirements for text and images of text. Basically, users with low vision or certain color vision deficiencies may have difficulty reading text on your site if the color of the text is too close to that of the background. In this article, we’ll talk about the color contrast requirements for non-text items on your site.
User interface components and graphical objects appearing on your site should have a contrast ratio of at least 3:1. In the following sections, we’ll unpack these two item types and go over some considerations you should keep in mind.
User Interface Components
Any visual information on your site that is necessary to identifying and operating an active control (such as buttons, links, and input fields) should meet the 3:1 contrast ratio mentioned in the previous section. Moreover, if an active control changes state, such as whether it is selected or receives focus, the visual indication of this change should likewise meet this contrast requirement.
Let’s look for a moment at the following examples of an input field.
You’ll notice in the first example that the space where the user is meant to input their name is set apart from the background by a gray box border. In the second screenshot, the user has moved their cursor to the name field. A blue border is used to indicate that the field has received focus.
Exceptions
There are a couple exceptions to this rule regarding user interface components which are worth mentioning. First, in cases where a change in state to a user interface component is clear without any visual indication, you do not need to worry about adding visual information that meets this contract requirement. For instance, you do not necessarily need a visual indication of a change in state for a link, since selecting the link will ostensibly activate it at the same time.
Second, this rule does not apply to inactive user interface components. Let’s say, for example, a user is filling out a form online. The submit button is not operable unless information has been entered into every field, and until then, the button color remains muted.
[Source: same as previous image]
Graphical Objects
Graphical objects can include stand-alone icons, such as a print or phone icon, as well as the individual significant portions of a larger diagram. Take a look, for example, at this very interesting pie chart expressing the division in market share among various browsers:
[Source: same as other images]
The color of each slice in the chart contrasts with those of the other slices, as well as with the background color.
Exceptions
There are some key exceptions to when the color of graphic objects has to meet a 3:1 contrast ratio. This rule doesn’t apply for:
Logos and flags
Pictures of real-life people or scenery
Graphics where the color choices are otherwise deemed essential. This can include screenshots intended to show how a certain website works, medical diagrams that use biologically accurate colors, or graphics that utilize color gradients to represent a measurement, like heatmaps.
Analyzing Color Contrast
As we discussed in our post on WCAG 1.4.3: Contrast (Minimum), there is a ton of free tools you can use to quickly and easily test the contrast ratio of your site. These are called Colour Contrast Analysers, and you can typically download them as software or browser extensions. Take a look at our article on WCAG 1.4.3 for a fuller explanation of how to use these tools.