E-mail List Archives

Color Contrast for Inactive User Interface Components


From: David Ashleydale
Date: Nov 27, 2012 1:05PM


WCAG 1.4.3 Contrast (Minimum) says that text that is part of an "inactive
user interface component" does not need to meet any minimum color contrast

We are creating a user interface that has pagination controls -- Previous
Page and Next Page. However, on the first page, there is no previous page
to go to. We decided that it would be nice to have both controls present
all the time so that users can become familiar with the interface and where
the controls are. So the designers want to have a Previous Page link on the
first page, but they want to disable it and style it so that it
appears inactive The most common way of doing this is to scale back the

However, once they got it to where they thought it was visually obvious
that it's not clickable, its contrast dropped below 4.5 : 1. But they
pointed out that 1.4.3 lets them do this because of the escape clause for
inactive user interface components.

But in the back of my mind I keep thinking that even though it's inactive,
it still has the word "Previous" on it and so it's meant to be read. But
when they tried bringing it back up to 4.5 :1, they said it no longer
looked inactive.

As an example for them I said, "What if you replaced the word 'Previous'
with '!@#$%^'? Would your design still work visually? If not, wouldn't that
be because you do want users to actually be able to read the word
'Previous'? And if it fails if users can't read the word 'Previous",
wouldn't that mean we need to provide enough contrast for everyone to be
able to read it?"

But they keep pointing to the exception provided by 1.4.3. Am I taking this
too far? Is the exception valid in this case and we shouldn't worry about
inactive user elements not being able to be read by everyone? And if it's
not a valid exception in this case, is there such a thing as a button that
provides at least 4.5 : 1 contrast and still looks inactive?

David Ashleydale