E-mail List Archives
Thread: help with contrast issue on button
Number of posts in this thread: 11 (In chronological order)
From: Angela French
Date: Tue, Mar 07 2017 12:19PM
Subject: help with contrast issue on button
No previous message | Next message →
Hello,
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
360-704-4316
= EMAIL ADDRESS REMOVED = <mailto: = EMAIL ADDRESS REMOVED = >
www.sbctc.edu<;http://www.sbctc.edu/>;
From: Swift, Daniel P.
Date: Tue, Mar 07 2017 12:37PM
Subject: Re: help with contrast issue on button
← Previous message | Next message →
Someone else might be able to speak more intelligently on the subject than me, but when I researched the algorithm about 6-12 months ago, I found that it was pretty involved. Now I just use this site and call it a day (link above signature).
I would be curious to know if what you found is even an issue since the color/font size passes on load but changes on hover ... the user already knows what the link is prior to interaction. Alternatively, since it seems like you don't have much choice with color, can you give some other indication (border, shadow, transition, transform, etc.) that the button is active or about to become active?
Contrast checker:
http://leaverou.github.io/contrast-ratio/
Dan Swift
Web Technical Specialist
Enterprise Services
West Chester University
From: Angela French
Date: Tue, Mar 07 2017 12:39PM
Subject: Re: help with contrast issue on button
← Previous message | Next message →
I see that I forgot to put the :hover color in since I was working with inline css on my experiment. Currently we scale back the intensity of the orange on hover. That is what I would do with the new button as well.
Angela French
From: Lovely, Brian (CONT)
Date: Tue, Mar 07 2017 12:41PM
Subject: Re: help with contrast issue on button
← Previous message | Next message →
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.
From: Lovely, Brian (CONT)
Date: Tue, Mar 07 2017 12:44PM
Subject: Re: help with contrast issue on button
← Previous message | Next message →
So, based on the formula, this text (which is 14px and normal weight) would have to be increased to at least 24px or 19px and bold.
From: Jim Allan
Date: Tue, Mar 07 2017 1:06PM
Subject: Re: help with contrast issue on button
← Previous message | Next message →
if you change the font color to black on hover or focus...all is good
On Tue, Mar 7, 2017 at 1:44 PM, Lovely, Brian (CONT) <
= EMAIL ADDRESS REMOVED = > wrote:
> So, based on the formula, this text (which is 14px and normal weight)
> would have to be increased to at least 24px or 19px and bold.
>
>
From: Lovely, Brian (CONT)
Date: Tue, Mar 07 2017 1:18PM
Subject: Re: help with contrast issue on button
← Previous message | Next message →
Good suggestion Jim! When you do need the formula, just take a breath and read it through, it's really not as complicated as it sounds, especially once you discard whichever measuring system you're not using (px or points).
From: Angela French
Date: Tue, Mar 07 2017 2:46PM
Subject: Re: help with contrast issue on button
← Previous message | Next message →
But it is the white on orange that is failing.
From: Lovely, Brian (CONT)
Date: Tue, Mar 07 2017 2:55PM
Subject: Re: help with contrast issue on button
← Previous message | Next message →
Well, that's when you would try bumping up the font size and possibly bolding the text. I just used aXe and the developer tools in Chrome and bumped up the font size of the Current Button to 19px and font-weight bold and the button passed.
From: Jim Allan
Date: Wed, Mar 08 2017 9:54AM
Subject: Re: help with contrast issue on button
← Previous message | Next message →
does the text of the button have to be white? if you make the text color
black, then it works on the non-focused button and in the hover state.
On Tue, Mar 7, 2017 at 3:55 PM, Lovely, Brian (CONT) <
= EMAIL ADDRESS REMOVED = > wrote:
> Well, that's when you would try bumping up the font size and possibly
> bolding the text. I just used aXe and the developer tools in Chrome and
> bumped up the font size of the Current Button to 19px and font-weight bold
> and the button passed.
>
>
From: Angela French
Date: Wed, Mar 08 2017 9:57AM
Subject: Re: help with contrast issue on button
← Previous message | No next message
Had not considered that option before. Will run it by the powers that be.
Thanks,
Angela French