WebAIM - Web Accessibility In Mind

E-mail List Archives

Re: conundrum with sufficient contrast on menu items

for

From: Angela French
Date: Nov 20, 2017 12:23PM

Thanks for the link. Will read and consider.

-----Original Message-----
From: WebAIM-Forum [mailto: <EMAIL REMOVED> ] On Behalf Of Mallory
Sent: Saturday, November 18, 2017 12:27 AM
To: WebAIM Discussion List < <EMAIL REMOVED> >
Subject: Re: [WebAIM] conundrum with sufficient contrast on menu items

> 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
>
> -----Original Message-----
> From: WebAIM-Forum [mailto: <EMAIL REMOVED> ] On
> Behalf Of Swift, Daniel P.
> Sent: Friday, November 17, 2017 1:26 PM
> To: WebAIM Discussion List < <EMAIL REMOVED> >
> Subject: Re: [WebAIM] conundrum with sufficient contrast on menu items
>
> 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
>
> -----Original Message-----
> From: WebAIM-Forum [mailto: <EMAIL REMOVED> ] On
> Behalf Of Angela French
> Sent: Friday, November 17, 2017 4:22 PM
> To: WebAim Forum ( <EMAIL 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 REMOVED> <mailto: <EMAIL REMOVED> >
> www.sbctc.edu<;http://www.sbctc.edu/>;
>
> > > archives at http://webaim.org/discussion/archives
> > > > archives at http://webaim.org/discussion/archives
> > > > archives at http://webaim.org/discussion/archives
>