WebAIM - Web Accessibility In Mind

E-mail List Archives

Re: help with contrast issue on button


From: Lovely, Brian (CONT)
Date: Mar 7, 2017 12:41PM

To quote WebAIM.org: WCAG 2.0 level AA requires a contrast ratio of 4.5:1 for normal text and 3:1 for large text. Level AAA requires a contrast ratio of 7:1 for normal text and 4.5:1 for large text. Large text is defined as 14 point (typically 18.66px) and bold or larger, or 18 point (typically 24px) or larger.

-----Original Message-----
From: WebAIM-Forum [mailto: <EMAIL REMOVED> ] On Behalf Of Angela French
Sent: Tuesday, March 07, 2017 2:20 PM
To: WebAim Forum ( <EMAIL REMOVED> ) < <EMAIL REMOVED> >
Subject: [WebAIM] help with contrast issue on button


I'm trying to come up with some combination of background-color and font-size that will result in a button/div that has sufficient contrast. Here is my test page<http://www.dev.sbctc.edu/_testing/test-expand-all.aspx>;.
The button/div labeled "current button" is the current color orange used on our site. It passes contrast check as the hover color of menu items in the blue nav bar at the top of the page. But it doesn't pass on the button because of the label's smaller font size.

So I'm experimenting with enlarging the font and/or darkening the orange in the button/div labeled "New Button." My new orange is a little bit darker, and my font is as large as my navigation font, though not bold. I'm trying to make this button accessible, but our Communications department that owns the site wants the color to be orange rather than rust.

Is the algorithm that computes contrast based on any given size of the font and the background color? Or is "Large Text" a certain minimum size?

Any suggestions?

Thank you

Angela French
Internet/Intranet Specialist
Washington State Board for Community and Technical Colleges

The information contained in this e-mail is confidential and/or proprietary to Capital One and/or its affiliates and may only be used solely in performance of work or services for Capital One. The information transmitted herewith is intended only for use by the individual or entity to which it is addressed. If the reader of this message is not the intended recipient, you are hereby notified that any review, retransmission, dissemination, distribution, copying or other use of, or taking of any action in reliance upon this information is strictly prohibited. If you have received this communication in error, please contact the sender and delete the material from your computer.