Color contrast question - button background

[Aleta Moses]

Hi there,



I have a question about button color contrast.



I am familiar with success criterion *1.4.3 Contrast (Minimum):* The visual
presentation of text <http://www.w3.org/TR/WCAG20/#textdef> and images of
text <http://www.w3.org/TR/WCAG20/#images-of-textdef> with a contrast ratio
<http://www.w3.org/TR/WCAG20/#contrast-ratiodef> of at least 4.5:1, for
normal text.



However I have been told by colleagues recently that there is also a
requirement for button color contrast with the background that it is
placed on.



If there is insufficient color contrast using 4.5:1 between a button and
its background , would this be considered an accessibility failure? Or is
text and background colour sufficient?



If there is a requirement, is there any instruction that would apply it to
some buttons and not others, or should it be applied to all on a site?


Any advice or guidance would be much appreciated.


Thanks,

Aleta

[SALES, TERRY LYNN]

The letter of the standard is for text, however, I apply it to anything that has meaning and would cause an issue if not recognizable by a user. Icons used as links, buttons like your example, etc. If the user would miss a function or action available to others by not being able to distinguish an item’s presence, I make them fix the contrast.

Terry Lynn (TL) Sales
DHS Trusted Tester, CMII, PMP
DHS/CBP/OIT/CSPD
571-468-5271 Desk
703-945-2777 B’Berry

From: Aleta Moses [mailto:***@gmail.com]
Sent: Wednesday, April 18, 2018 9:23 AM
To: w3c-wai-***@w3.org
Subject: Color contrast question - button background



Hi there,

I have a question about button color contrast.

I am familiar with success criterion 1.4.3 Contrast (Minimum): The visual presentation of text<http://www.w3.org/TR/WCAG20/#textdef> and images of text<http://www.w3.org/TR/WCAG20/#images-of-textdef> with a contrast ratio<http://www.w3.org/TR/WCAG20/#contrast-ratiodef> of at least 4.5:1, for normal text.

However I have been told by colleagues recently that there is also a requirement for button color contrast with the background that it is placed on.

If there is insufficient color contrast using 4.5:1 between a button and its background , would this be considered an accessibility failure? Or is text and background colour sufficient?

If there is a requirement, is there any instruction that would apply it to some buttons and not others, or should it be applied to all on a site?

Any advice or guidance would be much appreciated.

Thanks,
Aleta

[Vinil Peter]

Hi Aleta,

The fine print of the standard only mentions about the contrast ratio of text vs background. However, keeping in mind the larger intention of the guideline (to help people with color recognition issues distinguish between elements), one should ideally maintain the color contrast ratio for every object / element on the UI. I second Terry's response to your query.

Regards,
Vinil Peter, PMP



⁣Sent from BlueMail ​

Post by SALES, TERRY LYNN
The letter of the standard is for text, however, I apply it to anything
that has meaning and would cause an issue if not recognizable by a
user. Icons used as links, buttons like your example, etc. If the
user would miss a function or action available to others by not being
able to distinguish an item’s presence, I make them fix the contrast.
Terry Lynn (TL) Sales
DHS Trusted Tester, CMII, PMP
DHS/CBP/OIT/CSPD
571-468-5271 Desk
703-945-2777 B’Berry
Sent: Wednesday, April 18, 2018 9:23 AM
Subject: Color contrast question - button background
Hi there,
I have a question about button color contrast.
I am familiar with success criterion 1.4.3 Contrast (Minimum): The
visual presentation of text<http://www.w3.org/TR/WCAG20/#textdef> and
images of text<http://www.w3.org/TR/WCAG20/#images-of-textdef> with a
contrast ratio<http://www.w3.org/TR/WCAG20/#contrast-ratiodef> of at
least 4.5:1, for normal text.
However I have been told by colleagues recently that there is also a
requirement for button color contrast with the background that it is
placed on.
If there is insufficient color contrast using 4.5:1 between a button
and its background , would this be considered an accessibility failure?
Or is text and background colour sufficient?
If there is a requirement, is there any instruction that would apply it
to some buttons and not others, or should it be applied to all on a
site?
Any advice or guidance would be much appreciated.
Thanks,
Aleta

[Alan Maloney]

Note also that the candidate recommendation for WCAG 2.1 contains a success criterion for non-text contrast, so if you don’t style your buttons with 3:1 contrast now you may end up having to go back and do it anyway: https://www.w3.org/TR/WCAG21/#non-text-contrast

According to the current wording this would apply to the state and boundary of any button ‘except for inactive components or where the appearance of the component is determined by the user agent and not modified by the author’.

Alan Maloney
Information Architect
SAGE Publishing
1 Oliver's Yard, 55 City Road
London, EC1Y 1SP
UK

www.sagepub.co.uk<http://www.sagepub.co.uk/>

SAGE Publishing is a trading name of SAGE Publications Ltd, Registered in England No.1017514

Los Angeles | London | New Delhi
Singapore | Washington DC | Melbourne

From: SALES, TERRY LYNN [mailto:***@cbp.dhs.gov]
Sent: 18 April 2018 14:42
To: Aleta Moses <***@gmail.com>; w3c-wai-***@w3.org
Subject: RE: Color contrast question - button background

The letter of the standard is for text, however, I apply it to anything that has meaning and would cause an issue if not recognizable by a user. Icons used as links, buttons like your example, etc. If the user would miss a function or action available to others by not being able to distinguish an item’s presence, I make them fix the contrast.

Terry Lynn (TL) Sales
DHS Trusted Tester, CMII, PMP
DHS/CBP/OIT/CSPD
571-468-5271 Desk
703-945-2777 B’Berry

From: Aleta Moses [mailto:***@gmail.com]
Sent: Wednesday, April 18, 2018 9:23 AM
To: w3c-wai-***@w3.org<mailto:w3c-wai-***@w3.org>
Subject: Color contrast question - button background



Hi there,

I have a question about button color contrast.

I am familiar with success criterion 1.4.3 Contrast (Minimum): The visual presentation of text<http://www.w3.org/TR/WCAG20/#textdef> and images of text<http://www.w3.org/TR/WCAG20/#images-of-textdef> with a contrast ratio<http://www.w3.org/TR/WCAG20/#contrast-ratiodef> of at least 4.5:1, for normal text.

However I have been told by colleagues recently that there is also a requirement for button color contrast with the background that it is placed on.

If there is insufficient color contrast using 4.5:1 between a button and its background , would this be considered an accessibility failure? Or is text and background colour sufficient?

If there is a requirement, is there any instruction that would apply it to some buttons and not others, or should it be applied to all on a site?

Any advice or guidance would be much appreciated.

Thanks,
Aleta

[Patrick H. Lauke]

Post by SALES, TERRY LYNN
The letter of the standard is for text, however, I apply it to anything
that has meaning and would cause an issue if not recognizable by a
user.  Icons used as links, buttons like your example, etc.  If the user
would miss a function or action available to others by not being able to
distinguish an item’s presence, I make them fix the contrast.

However, note that when taking this interpretation, you're going beyond
what the normative requirement of WCAG 2.0 is - so your results (in the
case of a formal audit report against WCAG 2.0) won't be correct.

As others have noted, WCAG 2.1 will plug this gap, but when auditing
against WCAG 2.0, you can't mark anything other than contrast issues of
text vs background as a fail.

P

[SALES, TERRY LYNN]

I have the luxury of working with development teams while they are still in development. So I make them fix it before it gets to formal testing. :-)

Terry Lynn (TL) Sales
DHS Trusted Tester, CMII, PMP
DHS/CBP/OIT/CSPD
571-468-5271 Desk
703-945-2777 B’Berry


-----Original Message-----
From: Patrick H. Lauke [mailto:***@splintered.co.uk]
Sent: Wednesday, April 18, 2018 10:26 AM
To: w3c-wai-***@w3.org
Subject: Re: Color contrast question - button background

Post by SALES, TERRY LYNN
The letter of the standard is for text, however, I apply it to
anything that has meaning and would cause an issue if not recognizable
by a user.  Icons used as links, buttons like your example, etc.  If
the user would miss a function or action available to others by not
being able to distinguish an item’s presence, I make them fix the contrast.

However, note that when taking this interpretation, you're going beyond what the normative requirement of WCAG 2.0 is - so your results (in the case of a formal audit report against WCAG 2.0) won't be correct.

As others have noted, WCAG 2.1 will plug this gap, but when auditing against WCAG 2.0, you can't mark anything other than contrast issues of text vs background as a fail.

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

[Claudio Vera]

Aleta –

There is a proposed guideline that there be a 3:1 color contrast ratio for buttons or other non-text elements that will be part of the upcoming WCAG 2.1 guidelines. It is not yet a requirement, but it very possibly could be in the near future.

Here’s a link to the proposed guideline:
https://www.w3.org/TR/WCAG21/#non-text-contrast

There is no requirement for a 4.5:1 contrast between a button and its background that I know of.

Claudio Luis Vera
Senior Digital Accessibility Analyst

From: Aleta Moses [mailto:***@gmail.com]
Sent: Wednesday, April 18, 2018 9:23 AM
To: w3c-wai-***@w3.org
Subject: [EXTERNAL] Color contrast question - button background



Hi there,

I have a question about button color contrast.

I am familiar with success criterion 1.4.3 Contrast (Minimum): The visual presentation of text<http://www.w3.org/TR/WCAG20/#textdef> and images of text<http://www.w3.org/TR/WCAG20/#images-of-textdef> with a contrast ratio<http://www.w3.org/TR/WCAG20/#contrast-ratiodef> of at least 4.5:1, for normal text.

However I have been told by colleagues recently that there is also a requirement for button color contrast with the background that it is placed on.

If there is insufficient color contrast using 4.5:1 between a button and its background , would this be considered an accessibility failure? Or is text and background colour sufficient?

If there is a requirement, is there any instruction that would apply it to some buttons and not others, or should it be applied to all on a site?

Any advice or guidance would be much appreciated.

Thanks,
Aleta
CONFIDENTIALITY NOTE: This message may contain confidential or legally privileged information. If you are not the intended recipient, you are hereby notified that any disclosure, copying, distribution, or taking any action in reliance on these contents is strictly prohibited and may be unlawful. If you have received this communication in error, please notify us immediately by responding to this e-mail and then delete it from your system.