WebAIM - Web Accessibility In Mind

E-mail List Archives

Thread: Gray disabled icons and WCAG 2.0 AA contrast requirement

for

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

From: Nancy Johnson
Date: Wed, Oct 16 2013 7:05AM
Subject: Gray disabled icons and WCAG 2.0 AA contrast requirement
No previous message | Next message →

Hi,

Is there any new standard in creating icons to show a link or button
is temporarily non-functional, and meets the color contrast
requirement? Typically I would change the icon to gray-scale.

On the sites I work on, I noticed several of these no longer meet the
contrast requirement.

Thanks,

Nancy Johnson

From: Patrick H. Lauke
Date: Wed, Oct 16 2013 7:34AM
Subject: Re: Gray disabled icons and WCAG 2.0 AA contrast requirement
← Previous message | Next message →

On 16/10/2013 14:05, Nancy Johnson wrote:
> Is there any new standard in creating icons to show a link or button
> is temporarily non-functional, and meets the color contrast
> requirement? Typically I would change the icon to gray-scale.
>
> On the sites I work on, I noticed several of these no longer meet the
> contrast requirement.

Note that, strictly speaking, inactive controls don't need to meet any
contrast requirements according to the exceptions on 1.4.3:

"Incidental: Text or images of text that are part of an inactive user
interface component, that are pure decoration, that are not visible to
anyone, or that are part of a picture that contains significant other
visual content, have no contrast requirement."

However, it's of course still good if you can achieve sufficient
contrast, while still making them noticeably different from active
controls (otherwise you have a whole other set of problems where users
can't tell active/inactive apart).

P
--
Patrick H. Lauke
re·dux (adj.): brought back; returned. used postpositively
[latin : re-, re- + dux, leader; see duke.]

www.splintered.co.uk | www.photographia.co.uk
http://redux.deviantart.com | http://flickr.com/photos/redux/
twitter: @patrick_h_lauke | skype: patrick_h_lauke

From: Cameron Cundiff
Date: Wed, Oct 16 2013 7:54AM
Subject: Re: Gray disabled icons and WCAG 2.0 AA contrast requirement
← Previous message | Next message →

Also worth noting that the browser will generally change the contrast
automatically when a `disabled` attribute is applied to an input, like so:
http://jsfiddle.net/p78XN/


On Wed, Oct 16, 2013 at 9:34 AM, Patrick H. Lauke < = EMAIL ADDRESS REMOVED = >wrote:

> On 16/10/2013 14:05, Nancy Johnson wrote:
> > Is there any new standard in creating icons to show a link or button
> > is temporarily non-functional, and meets the color contrast
> > requirement? Typically I would change the icon to gray-scale.
> >
> > On the sites I work on, I noticed several of these no longer meet the
> > contrast requirement.
>
> Note that, strictly speaking, inactive controls don't need to meet any
> contrast requirements according to the exceptions on 1.4.3:
>
> "Incidental: Text or images of text that are part of an inactive user
> interface component, that are pure decoration, that are not visible to
> anyone, or that are part of a picture that contains significant other
> visual content, have no contrast requirement."
>
> However, it's of course still good if you can achieve sufficient
> contrast, while still making them noticeably different from active
> controls (otherwise you have a whole other set of problems where users
> can't tell active/inactive apart).
>
> P
> --
> Patrick H. Lauke
> > re·dux (adj.): brought back; returned. used postpositively
> [latin : re-, re- + dux, leader; see duke.]
>
> www.splintered.co.uk | www.photographia.co.uk
> http://redux.deviantart.com | http://flickr.com/photos/redux/
> > twitter: @patrick_h_lauke | skype: patrick_h_lauke
> > > > >

From: Nancy Johnson
Date: Wed, Oct 16 2013 8:00AM
Subject: Re: Gray disabled icons and WCAG 2.0 AA contrast requirement
← Previous message | Next message →

Thank you for clarifying this for me.

Nancy

On Wed, Oct 16, 2013 at 9:54 AM, Cameron Cundiff
< = EMAIL ADDRESS REMOVED = > wrote:
> Also worth noting that the browser will generally change the contrast
> automatically when a `disabled` attribute is applied to an input, like so:
> http://jsfiddle.net/p78XN/
>
>
> On Wed, Oct 16, 2013 at 9:34 AM, Patrick H. Lauke < = EMAIL ADDRESS REMOVED = >wrote:
>
>> On 16/10/2013 14:05, Nancy Johnson wrote:
>> > Is there any new standard in creating icons to show a link or button
>> > is temporarily non-functional, and meets the color contrast
>> > requirement? Typically I would change the icon to gray-scale.
>> >
>> > On the sites I work on, I noticed several of these no longer meet the
>> > contrast requirement.
>>
>> Note that, strictly speaking, inactive controls don't need to meet any
>> contrast requirements according to the exceptions on 1.4.3:
>>
>> "Incidental: Text or images of text that are part of an inactive user
>> interface component, that are pure decoration, that are not visible to
>> anyone, or that are part of a picture that contains significant other
>> visual content, have no contrast requirement."
>>
>> However, it's of course still good if you can achieve sufficient
>> contrast, while still making them noticeably different from active
>> controls (otherwise you have a whole other set of problems where users
>> can't tell active/inactive apart).
>>
>> P
>> --
>> Patrick H. Lauke
>> >> re·dux (adj.): brought back; returned. used postpositively
>> [latin : re-, re- + dux, leader; see duke.]
>>
>> www.splintered.co.uk | www.photographia.co.uk
>> http://redux.deviantart.com | http://flickr.com/photos/redux/
>> >> twitter: @patrick_h_lauke | skype: patrick_h_lauke
>> >> >> >> >>
> > >

From: Weissenberger, Todd M
Date: Thu, Oct 17 2013 7:11AM
Subject: Re: Gray disabled icons and WCAG 2.0 AA contrast requirement
← Previous message | No next message

Swap the image for one with a big "X" on it? Circle-slash?

-----Original Message-----
From: Nancy Johnson [mailto: = EMAIL ADDRESS REMOVED = ]
Sent: Wednesday, October 16, 2013 8:06 AM
To: WebAIM Discussion List
Subject: [WebAIM] Gray disabled icons and WCAG 2.0 AA contrast requirement

Hi,

Is there any new standard in creating icons to show a link or button is temporarily non-functional, and meets the color contrast requirement? Typically I would change the icon to gray-scale.

On the sites I work on, I noticed several of these no longer meet the contrast requirement.

Thanks,

Nancy Johnson