WebAIM - Web Accessibility In Mind

E-mail List Archives

Re: conundrum with sufficient contrast on menu items

for

From: Ugurcan Kutluoglu
Date: Nov 17, 2017 4:02PM

Hi Angela,

I wouldn't highly recommend it, but one of the ways WCAG suggest is using a
halo (text shadow).

You can try adding a darker text shadow on the menu items, so that they
retain a 4.5:1 contrast ratio with the shadow color.

Taken from https://www.w3.org/TR/WCAG20-TECHS/G18.html :

"Another method is to provide a halo around the text that provides the
necessary contrast ratio if the background image or color would not
normally be sufficiently different in relative luminance."

Ugi

On Fri, Nov 17, 2017 at 1:22 PM, Angela French < <EMAIL REMOVED> > wrote:

> I'm in a real pickle trying to figure out how to keep sufficient contrast
> on my menu items on a new development site<development%20site> where I am
> trying to implement new branding colors. . At full desktop size, no
> problem, but as I shrink the browser (before I get into the media query
> that will bring shrink the menu to a hamburger menu) I begin to lose some
> of my menu items if I keep the font the same size. If I make the font
> smaller, then I will lose sufficient contrast.
>
>
> Changing the colors is not an option. These are new branding colors our
> communications dept came up with .
> The current site is here<https://www.sbctc.edu/>. It has the same
> contrast issues, but the font gets smaller to make the menu items not
> disappear.
>
> I'm hoping someone has a solution I haven't thought of, other than
> changing the media query to bring in the hamburger menu sooner.
>
>
>
> Angela French
> Internet/Intranet Specialist
> Washington State Board for Community and Technical Colleges
> 360-704-4316
> <EMAIL REMOVED> <mailto: <EMAIL REMOVED> >
> www.sbctc.edu<;http://www.sbctc.edu/>;
>
> > > > >