RE: Color contrast question - button background

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:TERRYLYNN.SALES@cbp.dhs.gov]
Sent: 18 April 2018 14:42
To: Aleta Moses <aletamoses@gmail.com>; w3c-wai-ig@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:aletamoses@gmail.com]
Sent: Wednesday, April 18, 2018 9:23 AM
To: w3c-wai-ig@w3.org<mailto:w3c-wai-ig@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