E-mail List Archives
Thread: color contrast nav text on nav background
Number of posts in this thread: 4 (In chronological order)
From: Angela French
Date: Fri, Apr 17 2015 10:34AM
Subject: color contrast nav text on nav background
No previous message | Next message →
We are trying to make our new design colors have sufficient contrast to pass WCAG 2.0 Level AA. I am looking for some guidance on what "normal" and "large" text equates to.
In our navigation menus, our font family is: Century Gothic (sans-serif). The font-size is: 1.7em. The background colors are: # f15c16 (orange), #6c97b0 (mid blue), and #748a38 (green). The font color is white bold.
The achecker keeps failing us. I think it is evaluating for Level AAA, instead of level AA, even though I have that level checked.
Thank you for any advice/opinions.
Angela French
Internet Specialist
State Board for Community and Technical Colleges
360-704-4316
= EMAIL ADDRESS REMOVED = <mailto: = EMAIL ADDRESS REMOVED = >
www.checkoutacollege.com<;http://www.checkoutacollege.com>;
www.sbctc.edu<;http://www.sbctc.edu>;
From: Steve Faulkner
Date: Fri, Apr 17 2015 10:37AM
Subject: Re: color contrast nav text on nav background
← Previous message | Next message →
this may be helpful
http://www.paciellogroup.com/blog/2012/05/whats-large-text-in-wcag-2-0-parlance/
--
Regards
SteveF
HTML 5.1 <http://www.w3.org/html/wg/drafts/html/master/>;
On 17 April 2015 at 17:34, Angela French < = EMAIL ADDRESS REMOVED = > wrote:
> We are trying to make our new design colors have sufficient contrast to
> pass WCAG 2.0 Level AA. I am looking for some guidance on what "normal"
> and "large" text equates to.
> In our navigation menus, our font family is: Century Gothic
> (sans-serif). The font-size is: 1.7em. The background colors are: # f15c16
> (orange), #6c97b0 (mid blue), and #748a38 (green). The font color is white
> bold.
>
> The achecker keeps failing us. I think it is evaluating for Level AAA,
> instead of level AA, even though I have that level checked.
>
> Thank you for any advice/opinions.
>
>
>
> Angela French
> Internet Specialist
> State Board for Community and Technical Colleges
> 360-704-4316
> = EMAIL ADDRESS REMOVED = <mailto: = EMAIL ADDRESS REMOVED = >
> www.checkoutacollege.com<;http://www.checkoutacollege.com>;
> www.sbctc.edu<;http://www.sbctc.edu>;
>
> > > > >
From: Angela French
Date: Fri, Apr 17 2015 11:35AM
Subject: Re: color contrast nav text on nav background
← Previous message | Next message →
Awesome. Thank you.
From: Patrick H. Lauke
Date: Fri, Apr 17 2015 1:15PM
Subject: Re: color contrast nav text on nav background
← Previous message | No next message
On 17/04/2015 18:34, Angela French wrote:
> We are trying to make our new design colors have sufficient contrast
> to pass WCAG 2.0 Level AA. I am looking for some guidance on what
> "normal" and "large" text equates to. In our navigation menus, our
> font family is: Century Gothic (sans-serif). The font-size is:
> 1.7em.
Is it 1.7em of the standard font size for the whole document? In most
(all?) browsers (unless changed by the user) 1em = 16px, so if you say
it's 1.7em is it 27.2px (can be verified using DevTools/Firebug/etc and
checking computed values/metrics)? (i.e. the parent/ancestor containers,
or the actual body itself, have not been set to another size, which the
1.7em value would then take as starting or inherited value)
If so, 27.2px = 36.26pt (as 1px = 0.75pt), which in turn is far above
the WCAG 2 definition of "18pt or 14pt bold"
http://www.w3.org/TR/WCAG20/#larger-scaledef) for what constitutes
"large text".
> The background colors are: # f15c16 (orange), #6c97b0 (mid
> blue), and #748a38 (green). The font color is white bold.
Assuming your text is indeed 36.26pt - large text - all those values
have a color contrast ratio above 3:1, so per the letter of WCAG 2 are ok.
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_lauke