E-mail List Archives
Thread: conundrum with sufficient contrast on menu items
Number of posts in this thread: 7 (In chronological order)
From: Angela French
Date: Fri, Nov 17 2017 2:22PM
Subject: conundrum with sufficient contrast on menu items
No previous message | Next message →
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 ADDRESS REMOVED = <mailto: = EMAIL ADDRESS REMOVED = >
www.sbctc.edu<;http://www.sbctc.edu/>;
From: Swift, Daniel P.
Date: Fri, Nov 17 2017 2:26PM
Subject: Re: conundrum with sufficient contrast on menu items
← Previous message | Next message →
You could get more space if you space out the menu items evenly (assuming the menu layout is similar) ... at 1/6. Currently you have more room on the right than the left. You can probably get away with a larger font size if you do that.
Just a thought before I run off.
Dan Swift
Senior Web Specialist
Enterprise Services
West Chester University
610.738.0589
From: Ugurcan Kutluoglu
Date: Fri, Nov 17 2017 4:02PM
Subject: Re: conundrum with sufficient contrast on menu items
← Previous message | Next message →
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 ADDRESS 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 ADDRESS REMOVED = <mailto: = EMAIL ADDRESS REMOVED = >
> www.sbctc.edu<;http://www.sbctc.edu/>;
>
> > > > >
From: Angela French
Date: Fri, Nov 17 2017 4:45PM
Subject: Re: conundrum with sufficient contrast on menu items
← Previous message | Next message →
So, the contrast validators don't take into account the font family do they? Here is a sample page I made. The menu items are 19px bold and so is the middle example in my main content area, but the menu items are larger. The difference is the font family.
https://dev.sbctc.edu/_testing/test-contrast.aspx
From: Mallory
Date: Sat, Nov 18 2017 1:27AM
Subject: Re: conundrum with sufficient contrast on menu items
← Previous message | Next message →
> So, the contrast validators don't take into account the font family do
> they?
They don't, but the rule about the algorithm does-- it states the font
family, style (thin vs thick fonts), and OS play a role.
You'll get anywhere from 18px to 19.5px as necessary size if you're
barely passing the large-fonts exception, depending on what you use for
calculation. The font-smoothing and added fatness of fonts on MacOS for
example could mean something may just pass the algorithm on a Mac but is
too thin to pass on Windows.
tbh the hover colour has another, non-WCAG problem: it's very close to a
set of colours that "jump". Like when red sits over green, blue sitting
over orange makes some brains see the letters "move" or jump.
https://en.wikipedia.org/wiki/Chromostereopsis
I would think branding guidelines could take a step back in the interest
of humans performing tasks and let the hover text colour be one of the
blacks (000, 222, 444...). It's only visible on hover/focus rather than
the page at default so if there ever could be pushback on brand, this
would be the place. A black on the orange is much, much easier on the
eyes.
cheers,
Mallory
On Sat, Nov 18, 2017, at 12:45 AM, Angela French wrote:
> So, the contrast validators don't take into account the font family do
> they? Here is a sample page I made. The menu items are 19px bold and so
> is the middle example in my main content area, but the menu items are
> larger. The difference is the font family.
>
> https://dev.sbctc.edu/_testing/test-contrast.aspx
>
>
From: Concilio, Joan
Date: Sat, Nov 18 2017 5:47PM
Subject: Re: conundrum with sufficient contrast on menu items
← Previous message | Next message →
Hi Angela,
?If you don't want to move the media query sooner, you might take a look at a midrange breakpoint in which you put each menu item on two lines, still keeping space between them but allowing you to keep a larger font size. I'm not saying that would look ideal, and I'd probably go to hamburger at anything under 990 personally, but it's a thought!
All the best,
Joan
Joan Concilio, web specialist
Office of the Vice Dean for Research and Graduate Studies
= EMAIL ADDRESS REMOVED = | (o) 717-531-5674 | (m) 717-515-5555
Penn State College of Medicine, Mail Code H175
500 University Drive
PO Box 850
Hershey PA 17033-0850
From: Angela French < = EMAIL ADDRESS REMOVED = >
Sent: Friday, November 17, 2017 4:22 PM
To: WebAim Forum ( = EMAIL ADDRESS REMOVED = )
Subject: [WebAIM] conundrum with sufficient contrast on menu items
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 ADDRESS REMOVED = <mailto: = EMAIL ADDRESS REMOVED = >
www.sbctc.edu<;http://www.sbctc.edu/>;
From: Angela French
Date: Mon, Nov 20 2017 12:23PM
Subject: Re: conundrum with sufficient contrast on menu items
← Previous message | No next message
Thanks for the link. Will read and consider.