WebAIM - Web Accessibility In Mind

E-mail List Archives

Thread: conundrum with sufficient contrast on menu items

for

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

-----Original Message-----
From: WebAIM-Forum [mailto: = EMAIL ADDRESS REMOVED = ] On Behalf Of Angela French
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: 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

-----Original Message-----
From: WebAIM-Forum [mailto: = EMAIL ADDRESS REMOVED = ] On Behalf Of Swift, Daniel P.
Sent: Friday, November 17, 2017 1:26 PM
To: WebAIM Discussion List < = EMAIL ADDRESS 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 ADDRESS REMOVED = ] On Behalf Of Angela French
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: 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
>
> -----Original Message-----
> From: WebAIM-Forum [mailto: = EMAIL ADDRESS REMOVED = ] On
> Behalf Of Swift, Daniel P.
> Sent: Friday, November 17, 2017 1:26 PM
> To: WebAIM Discussion List < = EMAIL ADDRESS 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 ADDRESS REMOVED = ] On
> Behalf Of Angela French
> 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/>;
>
> > > at http://webaim.org/discussion/archives
> > > > at http://webaim.org/discussion/archives
> > > > >

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.

-----Original Message-----
From: WebAIM-Forum [mailto: = EMAIL ADDRESS REMOVED = ] On Behalf Of Mallory
Sent: Saturday, November 18, 2017 12:27 AM
To: WebAIM Discussion List < = EMAIL ADDRESS 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 ADDRESS REMOVED = ] On
> Behalf Of Swift, Daniel P.
> Sent: Friday, November 17, 2017 1:26 PM
> To: WebAIM Discussion List < = EMAIL ADDRESS 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 ADDRESS REMOVED = ] On
> Behalf Of Angela French
> 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/>;
>
> > > archives at http://webaim.org/discussion/archives
> > > > archives at http://webaim.org/discussion/archives
> > > > archives at http://webaim.org/discussion/archives
>