WebAIM - Web Accessibility In Mind

E-mail List Archives

Thread: Color Contrast for Inactive User Interface Components

for

Number of posts in this thread: 4 (In chronological order)

From: David Ashleydale
Date: Tue, Nov 27 2012 1:05PM
Subject: Color Contrast for Inactive User Interface Components
No previous message | Next message →

Hi,

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

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

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?

Thanks,
David Ashleydale

From: Jared Smith
Date: Tue, Nov 27 2012 3:23PM
Subject: Re: Color Contrast for Inactive User Interface Components
← Previous message | Next message →

I think that this would be a valid exception to the WCAG 2.0 contrast
requirements. As noted, contrast (or the lack thereof) is the most
common way of indicating disabled controls. While some level of
contrast would certainly be advisable, if it is a disabled control,
it's clearly exempted from the requirements.

A few additional thoughts:

- It seems it would be better to simply not present the link or text
at all. This would avoid all possible confusion. It's rare to see a
Previous/Next type link like this present at all if there is no
Previous/Next.

- The link should almost certainly NOT be a link at all, but simply
text. If it is marked up as a link, there is no easy way to indicate
that it is disabled to screen reader users. You could try adding
aria-disabled="true", but the last I checked, this provided no
functionality on links, only on form controls.

Jared Smith
WebAIM

From: David Ashleydale
Date: Tue, Nov 27 2012 3:34PM
Subject: Re: Color Contrast for Inactive User Interface Components
← Previous message | Next message →

Thanks, Jared.

Yes, we considered having the Previous link not appear at all if there are
no previous pages, and I kind of actually prefer that most of the time. But
it's an interface design decision. Some of the designers feel like it's
beneficial to keep the control bar consistent, disabling the controls when
they don't apply, instead of having them take turns disappearing and
appearing under certain circumstances.

David


On Tue, Nov 27, 2012 at 2:23 PM, Jared Smith < = EMAIL ADDRESS REMOVED = > wrote:

> I think that this would be a valid exception to the WCAG 2.0 contrast
> requirements. As noted, contrast (or the lack thereof) is the most
> common way of indicating disabled controls. While some level of
> contrast would certainly be advisable, if it is a disabled control,
> it's clearly exempted from the requirements.
>
> A few additional thoughts:
>
> - It seems it would be better to simply not present the link or text
> at all. This would avoid all possible confusion. It's rare to see a
> Previous/Next type link like this present at all if there is no
> Previous/Next.
>
> - The link should almost certainly NOT be a link at all, but simply
> text. If it is marked up as a link, there is no easy way to indicate
> that it is disabled to screen reader users. You could try adding
> aria-disabled="true", but the last I checked, this provided no
> functionality on links, only on form controls.
>
> Jared Smith
> WebAIM
> > > >

From: GF Mueden@
Date: Tue, Nov 27 2012 7:47PM
Subject: Re: Color Contrast for Inactive User Interface Components
← Previous message | No next message

David, as an elderly user, I like to rely on what I see. If is not
there to be used, take it out. I hate seeing the mess of a big
standard menu on every page. When I ask for something, I want to be
taken there, not to another page looking like the one I just left, and
being offered ten other places to go. I want to see only what I came
for. I can always hit Home and get them all. Having a link to the
site map at the top of every page would be great. Simple, uncluttered,
no unwanted menus moused over as I scroll down.

Emerson said something like Consistency is the hobgoblin of small minds.

Be of good cheer. ===gm=== (George)

On 11/27/2012 5:34 PM, David Ashleydale wrote:
> Thanks, Jared.
>
> Yes, we considered having the Previous link not appear at all if there are
> no previous pages, and I kind of actually prefer that most of the time. But
> it's an interface design decision. Some of the designers feel like it's
> beneficial to keep the control bar consistent, disabling the controls when
> they don't apply, instead of having them take turns disappearing and
> appearing under certain circumstances.
>
> David
>
>
> On Tue, Nov 27, 2012 at 2:23 PM, Jared Smith < = EMAIL ADDRESS REMOVED = > wrote:
>
>> I think that this would be a valid exception to the WCAG 2.0 contrast
>> requirements. As noted, contrast (or the lack thereof) is the most
>> common way of indicating disabled controls. While some level of
>> contrast would certainly be advisable, if it is a disabled control,
>> it's clearly exempted from the requirements.
>>
>> A few additional thoughts:
>>
>> - It seems it would be better to simply not present the link or text
>> at all. This would avoid all possible confusion. It's rare to see a
>> Previous/Next type link like this present at all if there is no
>> Previous/Next.
>>
>> - The link should almost certainly NOT be a link at all, but simply
>> text. If it is marked up as a link, there is no easy way to indicate
>> that it is disabled to screen reader users. You could try adding
>> aria-disabled="true", but the last I checked, this provided no
>> functionality on links, only on form controls.
>>
>> Jared Smith
>> WebAIM
>> >> >> >>
> > > >