WebAIM - Web Accessibility In Mind

E-mail List Archives

Thread: help with contrast issue on button

for

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

-----Original Message-----
From: WebAIM-Forum [mailto: = EMAIL ADDRESS REMOVED = ] On Behalf Of Swift, Daniel P.
Sent: Tuesday, March 07, 2017 11:37 AM
To: WebAIM Discussion List
Subject: Re: [WebAIM] help with contrast issue on button

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: 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.

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

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/>;

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.

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.

-----Original Message-----
From: WebAIM-Forum [mailto: = EMAIL ADDRESS REMOVED = ] On Behalf Of Angela French
Sent: Tuesday, March 07, 2017 2:39 PM
To: WebAIM Discussion List < = EMAIL ADDRESS REMOVED = >
Subject: Re: [WebAIM] help with contrast issue on button

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

-----Original Message-----
From: WebAIM-Forum [mailto: = EMAIL ADDRESS REMOVED = ] On Behalf Of Swift, Daniel P.
Sent: Tuesday, March 07, 2017 11:37 AM
To: WebAIM Discussion List
Subject: Re: [WebAIM] help with contrast issue on button

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
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.

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.
>
> -----Original Message-----
> From: WebAIM-Forum [mailto: = EMAIL ADDRESS REMOVED = ] On
> Behalf Of Angela French
> Sent: Tuesday, March 07, 2017 2:39 PM
> To: WebAIM Discussion List < = EMAIL ADDRESS REMOVED = >
> Subject: Re: [WebAIM] help with contrast issue on button
>
> 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
>
> -----Original Message-----
> From: WebAIM-Forum [mailto: = EMAIL ADDRESS REMOVED = ] On
> Behalf Of Swift, Daniel P.
> Sent: Tuesday, March 07, 2017 11:37 AM
> To: WebAIM Discussion List
> Subject: Re: [WebAIM] help with contrast issue on button
>
> 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
> > > at http://webaim.org/discussion/archives
> > > > at http://webaim.org/discussion/archives
> > >
> 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.
> > > > >



--
Jim Allan, Accessibility Coordinator
Texas School for the Blind and Visually Impaired
1100 W. 45th St., Austin, Texas 78756
voice 512.206.9315 fax: 512.206.9264 http://www.tsbvi.edu/
"We shape our tools and thereafter our tools shape us." McLuhan, 1964

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).

-----Original Message-----
From: WebAIM-Forum [mailto: = EMAIL ADDRESS REMOVED = ] On Behalf Of Jim Allan
Sent: Tuesday, March 07, 2017 3:07 PM
To: WebAIM Discussion List < = EMAIL ADDRESS REMOVED = >
Subject: Re: [WebAIM] help with contrast issue on button

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.
>
> -----Original Message-----
> From: WebAIM-Forum [mailto: = EMAIL ADDRESS REMOVED = ] On
> Behalf Of Angela French
> Sent: Tuesday, March 07, 2017 2:39 PM
> To: WebAIM Discussion List < = EMAIL ADDRESS REMOVED = >
> Subject: Re: [WebAIM] help with contrast issue on button
>
> 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
>
> -----Original Message-----
> From: WebAIM-Forum [mailto: = EMAIL ADDRESS REMOVED = ] On
> Behalf Of Swift, Daniel P.
> Sent: Tuesday, March 07, 2017 11:37 AM
> To: WebAIM Discussion List
> Subject: Re: [WebAIM] help with contrast issue on button
>
> 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
> > > archives at http://webaim.org/discussion/archives
> > > > archives at http://webaim.org/discussion/archives
> > >
> 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.
> > > archives at http://webaim.org/discussion/archives
> >



--
Jim Allan, Accessibility Coordinator
Texas School for the Blind and Visually Impaired
1100 W. 45th St., Austin, Texas 78756
voice 512.206.9315 fax: 512.206.9264 http://www.tsbvi.edu/
"We shape our tools and thereafter our tools shape us." McLuhan, 1964 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.

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.

-----Original Message-----
From: WebAIM-Forum [mailto: = EMAIL ADDRESS REMOVED = ] On Behalf Of Jim Allan
Sent: Tuesday, March 07, 2017 12:07 PM
To: WebAIM Discussion List
Subject: Re: [WebAIM] help with contrast issue on button

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.
>
> -----Original Message-----
> From: WebAIM-Forum [mailto: = EMAIL ADDRESS REMOVED = ] On
> Behalf Of Angela French
> Sent: Tuesday, March 07, 2017 2:39 PM
> To: WebAIM Discussion List < = EMAIL ADDRESS REMOVED = >
> Subject: Re: [WebAIM] help with contrast issue on button
>
> 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
>
> -----Original Message-----
> From: WebAIM-Forum [mailto: = EMAIL ADDRESS REMOVED = ] On
> Behalf Of Swift, Daniel P.
> Sent: Tuesday, March 07, 2017 11:37 AM
> To: WebAIM Discussion List
> Subject: Re: [WebAIM] help with contrast issue on button
>
> 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
> > > archives at http://webaim.org/discussion/archives
> > > > archives at http://webaim.org/discussion/archives
> > >
> 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.
> > > archives at http://webaim.org/discussion/archives
> >



--
Jim Allan, Accessibility Coordinator
Texas School for the Blind and Visually Impaired
1100 W. 45th St., Austin, Texas 78756
voice 512.206.9315 fax: 512.206.9264 http://www.tsbvi.edu/
"We shape our tools and thereafter our tools shape us." McLuhan, 1964

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.

-----Original Message-----
From: WebAIM-Forum [mailto: = EMAIL ADDRESS REMOVED = ] On Behalf Of Angela French
Sent: Tuesday, March 07, 2017 4:47 PM
To: WebAIM Discussion List < = EMAIL ADDRESS REMOVED = >
Subject: Re: [WebAIM] help with contrast issue on button

But it is the white on orange that is failing

-----Original Message-----
From: WebAIM-Forum [mailto: = EMAIL ADDRESS REMOVED = ] On Behalf Of Jim Allan
Sent: Tuesday, March 07, 2017 12:07 PM
To: WebAIM Discussion List
Subject: Re: [WebAIM] help with contrast issue on button

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.
>
> -----Original Message-----
> From: WebAIM-Forum [mailto: = EMAIL ADDRESS REMOVED = ] On
> Behalf Of Angela French
> Sent: Tuesday, March 07, 2017 2:39 PM
> To: WebAIM Discussion List < = EMAIL ADDRESS REMOVED = >
> Subject: Re: [WebAIM] help with contrast issue on button
>
> 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
>
> -----Original Message-----
> From: WebAIM-Forum [mailto: = EMAIL ADDRESS REMOVED = ] On
> Behalf Of Swift, Daniel P.
> Sent: Tuesday, March 07, 2017 11:37 AM
> To: WebAIM Discussion List
> Subject: Re: [WebAIM] help with contrast issue on button
>
> 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
> > > archives at http://webaim.org/discussion/archives
> > > > archives at http://webaim.org/discussion/archives
> > >
> 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.
> > > archives at http://webaim.org/discussion/archives
> >



--
Jim Allan, Accessibility Coordinator
Texas School for the Blind and Visually Impaired
1100 W. 45th St., Austin, Texas 78756
voice 512.206.9315 fax: 512.206.9264 http://www.tsbvi.edu/
"We shape our tools and thereafter our tools shape us." McLuhan, 1964 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.

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.
>
> -----Original Message-----
> From: WebAIM-Forum [mailto: = EMAIL ADDRESS REMOVED = ] On
> Behalf Of Angela French
> Sent: Tuesday, March 07, 2017 4:47 PM
> To: WebAIM Discussion List < = EMAIL ADDRESS REMOVED = >
> Subject: Re: [WebAIM] help with contrast issue on button
>
> But it is the white on orange that is failing
>
> -----Original Message-----
> From: WebAIM-Forum [mailto: = EMAIL ADDRESS REMOVED = ] On
> Behalf Of Jim Allan
> Sent: Tuesday, March 07, 2017 12:07 PM
> To: WebAIM Discussion List
> Subject: Re: [WebAIM] help with contrast issue on button
>
> 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.
> >
> > -----Original Message-----
> > From: WebAIM-Forum [mailto: = EMAIL ADDRESS REMOVED = ] On
> > Behalf Of Angela French
> > Sent: Tuesday, March 07, 2017 2:39 PM
> > To: WebAIM Discussion List < = EMAIL ADDRESS REMOVED = >
> > Subject: Re: [WebAIM] help with contrast issue on button
> >
> > 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
> >
> > -----Original Message-----
> > From: WebAIM-Forum [mailto: = EMAIL ADDRESS REMOVED = ] On
> > Behalf Of Swift, Daniel P.
> > Sent: Tuesday, March 07, 2017 11:37 AM
> > To: WebAIM Discussion List
> > Subject: Re: [WebAIM] help with contrast issue on button
> >
> > 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
> > > > > > archives at http://webaim.org/discussion/archives
> > > > > > > > archives at http://webaim.org/discussion/archives
> > > > > >
> > 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.
> > > > > > archives at http://webaim.org/discussion/archives
> > > >
>
>
>
> --
> Jim Allan, Accessibility Coordinator
> Texas School for the Blind and Visually Impaired
> 1100 W. 45th St., Austin, Texas 78756
> voice 512.206.9315 fax: 512.206.9264 http://www.tsbvi.edu/
> "We shape our tools and thereafter our tools shape us." McLuhan, 1964
> > > at http://webaim.org/discussion/archives
> > > > at http://webaim.org/discussion/archives
> > >
> 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.
> > > > >



--
Jim Allan, Accessibility Coordinator
Texas School for the Blind and Visually Impaired
1100 W. 45th St., Austin, Texas 78756
voice 512.206.9315 fax: 512.206.9264 http://www.tsbvi.edu/
"We shape our tools and thereafter our tools shape us." McLuhan, 1964

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

-----Original Message-----
From: WebAIM-Forum [mailto: = EMAIL ADDRESS REMOVED = ] On Behalf Of Jim Allan
Sent: Wednesday, March 08, 2017 8:54 AM
To: WebAIM Discussion List
Subject: Re: [WebAIM] help with contrast issue on button

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.
>
> -----Original Message-----
> From: WebAIM-Forum [mailto: = EMAIL ADDRESS REMOVED = ] On
> Behalf Of Angela French
> Sent: Tuesday, March 07, 2017 4:47 PM
> To: WebAIM Discussion List < = EMAIL ADDRESS REMOVED = >
> Subject: Re: [WebAIM] help with contrast issue on button
>
> But it is the white on orange that is failing
>
> -----Original Message-----
> From: WebAIM-Forum [mailto: = EMAIL ADDRESS REMOVED = ] On
> Behalf Of Jim Allan
> Sent: Tuesday, March 07, 2017 12:07 PM
> To: WebAIM Discussion List
> Subject: Re: [WebAIM] help with contrast issue on button
>
> 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.
> >
> > -----Original Message-----
> > From: WebAIM-Forum [mailto: = EMAIL ADDRESS REMOVED = ] On
> > Behalf Of Angela French
> > Sent: Tuesday, March 07, 2017 2:39 PM
> > To: WebAIM Discussion List < = EMAIL ADDRESS REMOVED = >
> > Subject: Re: [WebAIM] help with contrast issue on button
> >
> > 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
> >
> > -----Original Message-----
> > From: WebAIM-Forum [mailto: = EMAIL ADDRESS REMOVED = ] On
> > Behalf Of Swift, Daniel P.
> > Sent: Tuesday, March 07, 2017 11:37 AM
> > To: WebAIM Discussion List
> > Subject: Re: [WebAIM] help with contrast issue on button
> >
> > 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
> > > > > > archives at http://webaim.org/discussion/archives
> > > > > > > > archives at http://webaim.org/discussion/archives
> > > > > >
> > 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.
> > > > > > archives at http://webaim.org/discussion/archives
> > > >
>
>
>
> --
> Jim Allan, Accessibility Coordinator
> Texas School for the Blind and Visually Impaired
> 1100 W. 45th St., Austin, Texas 78756
> voice 512.206.9315 fax: 512.206.9264 http://www.tsbvi.edu/
> "We shape our tools and thereafter our tools shape us." McLuhan, 1964
> > > archives at http://webaim.org/discussion/archives
> > > > archives at http://webaim.org/discussion/archives
> > >
> 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.
> > > archives at http://webaim.org/discussion/archives
> >



--
Jim Allan, Accessibility Coordinator
Texas School for the Blind and Visually Impaired
1100 W. 45th St., Austin, Texas 78756
voice 512.206.9315 fax: 512.206.9264 http://www.tsbvi.edu/
"We shape our tools and thereafter our tools shape us." McLuhan, 1964