WebAIM - Web Accessibility In Mind

E-mail List Archives

Thread: Use of colour

for

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

From: Fernand van Olphen
Date: Sun, May 06 2018 11:21AM
Subject: Use of colour
No previous message | Next message →

Hi everyone,

I have a question about the use of colour.

Example:
https://getbootstrap.com/docs/4.1/components/pagination/,
under the heading Disabled and active states

Colour is used to indicate that page number 2 is active. The colour of the number 2 is white, and the background is blue. The adjacent numbers are black on a white background.

I am assuming the following:

In the given example the use of colour is allowed if BOTH of the conditions are met:

Condition 1: the number 2 colour (white) and the background colour (blue) must have a contrast ratio of 4.5:1
Condition 2: the background colour (blue) and the surrounding colour (white) must have a contrast of 3:1

Is my assumption correct?

Kind regards,

Fernand van Olphen
Accessibility advisor
Municipality of The Hague
De disclaimer van toepassing op e-mail van de gemeente Den Haag vindt u op: http://www.denhaag.nl/disclaimer

From: Patrick H. Lauke
Date: Sun, May 06 2018 12:40PM
Subject: Re: Use of colour
← Previous message | Next message →

On 06/05/2018 18:21, Fernand van Olphen wrote:
[...]
> Condition 1: the number 2 colour (white) and the background colour (blue) must have a contrast ratio of 4.5:1

Yes. And see
https://getbootstrap.com/docs/4.1/getting-started/accessibility/#color-contrast

> Condition 2: the background colour (blue) and the surrounding colour (white) must have a contrast of 3:1

Under WCAG 2.0, there's no requirement for any contrast ratios for
non-text content (including backgrounds of elements against their
underlying background). In WCAG 2.1 you have 1.4.11
https://www.w3.org/TR/WCAG21/#non-text-contrast which indeed requires 3:1.

P
--
Patrick H. Lauke

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

From: Birkir R. Gunnarsson
Date: Sun, May 06 2018 1:08PM
Subject: Re: Use of colour
← Previous message | Next message →

1. Color contrast is not required for disabled elements )text to
background on disabled links do not have to pass the 4.5:1), of course
if you can make them pass, you should.
2. Make sure that the color difference is not the only thing telling
disabled links from active links. There must be a programmatic
indication as well, such as using the aria-disabled="true" attribute
for screen readers (in addition to tabindex='-1", or just removing the
href attribute from inactive links.
See the list of conditions in situation a on:
https://www.w3.org/WAI/WCAG21/Understanding/use-of-color.html




On 5/6/18, Patrick H. Lauke < = EMAIL ADDRESS REMOVED = > wrote:
> On 06/05/2018 18:21, Fernand van Olphen wrote:
> [...]
>> Condition 1: the number 2 colour (white) and the background colour (blue)
>> must have a contrast ratio of 4.5:1
>
> Yes. And see
> https://getbootstrap.com/docs/4.1/getting-started/accessibility/#color-contrast
>
>> Condition 2: the background colour (blue) and the surrounding colour
>> (white) must have a contrast of 3:1
>
> Under WCAG 2.0, there's no requirement for any contrast ratios for
> non-text content (including backgrounds of elements against their
> underlying background). In WCAG 2.1 you have 1.4.11
> https://www.w3.org/TR/WCAG21/#non-text-contrast which indeed requires 3:1.
>
> P
> --
> Patrick H. Lauke
>
> www.splintered.co.uk | https://github.com/patrickhlauke
> http://flickr.com/photos/redux/ | http://redux.deviantart.com
> twitter: @patrick_h_lauke | skype: patrick_h_lauke
> > > > >


--
Work hard. Have fun. Make history.

From: Patrick H. Lauke
Date: Sun, May 06 2018 1:14PM
Subject: Re: Use of colour
← Previous message | Next message →

On 06/05/2018 20:08, Birkir R. Gunnarsson wrote:
> 1. Color contrast is not required for disabled elements )text to
> background on disabled links do not have to pass the 4.5:1), of course
> if you can make them pass, you should.

Arguably, when the link is not clickable, it turns into an indicator
(rather than just being a disabled element).

> 2. Make sure that the color difference is not the only thing telling
> disabled links from active links. There must be a programmatic
> indication as well, such as using the aria-disabled="true" attribute
> for screen readers (in addition to tabindex='-1", or just removing the
> href attribute from inactive links.
> See the list of conditions in situation a on:
> https://www.w3.org/WAI/WCAG21/Understanding/use-of-color.html

Strangely, I thought there was an exemption for when there's a complete
inversion of foreground/background, but I must have misremembered.

P
--
Patrick H. Lauke

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

From: glen walker
Date: Sun, May 06 2018 5:11PM
Subject: Re: Use of colour
← Previous message | Next message →

Something that wasn't mentioned, and perhaps because you didn't ask
(smile), is that the current link should have aria-current set.

Glen

On Sun, May 6, 2018 at 1:14 PM, Patrick H. Lauke < = EMAIL ADDRESS REMOVED = >
wrote:

> On 06/05/2018 20:08, Birkir R. Gunnarsson wrote:
>
>> 1. Color contrast is not required for disabled elements )text to
>> background on disabled links do not have to pass the 4.5:1), of course
>> if you can make them pass, you should.
>>
>
> Arguably, when the link is not clickable, it turns into an indicator
> (rather than just being a disabled element).
>
> 2. Make sure that the color difference is not the only thing telling
>> disabled links from active links. There must be a programmatic
>> indication as well, such as using the aria-disabled="true" attribute
>> for screen readers (in addition to tabindex='-1", or just removing the
>> href attribute from inactive links.
>> See the list of conditions in situation a on:
>> https://www.w3.org/WAI/WCAG21/Understanding/use-of-color.html
>>
>
> Strangely, I thought there was an exemption for when there's a complete
> inversion of foreground/background, but I must have misremembered.
>
>
> P
> --
> Patrick H. Lauke
>
> www.splintered.co.uk | https://github.com/patrickhlauke
> http://flickr.com/photos/redux/ | http://redux.deviantart.com
> twitter: @patrick_h_lauke | skype: patrick_h_lauke
> > > > >

From: Fernand van Olphen
Date: Mon, May 07 2018 4:57AM
Subject: Re: Use of colour
← Previous message | No next message

Patrick, Birkir, Glen: thanks for your comments!

Fernand

De disclaimer van toepassing op e-mail van de gemeente Den Haag vindt u op: http://www.denhaag.nl/disclaimer