WebAIM - Web Accessibility In Mind

E-mail List Archives

Re: color contrast nav text on nav background

for

From: Patrick H. Lauke
Date: Apr 17, 2015 1:15PM

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