WebAIM - Web Accessibility In Mind

E-mail List Archives

Thread: Bright yellow as a navigational background color

for

Number of posts in this thread: 3 (In chronological order)

From: Joan Preston
Date: Mon, Aug 21 2017 12:04PM
Subject: Bright yellow as a navigational background color
No previous message | Next message →

Hi all,

A user is using bright yellow (#FFFF000) as the background for a navigational bar and the drop down. The background of the banner above it is orange (#FF4400). The yellow by itself is hard to look at, adding the orange above makes it even harder to view the page. I tried to find a site to reference why having these bright colors could be a problem for some users, but didn't find one that explained well. I did watch Jared Smith-Rethinking Color and Contrast video on YouTube and I thought it was great, but was hoping I could like to a web page instead.

Does anyone know if a site that explains the issues of using bright colors?

Thanks,

Joan Preston
Web Accessibility Coordinator
ITS - California State University, Long Beach
Usability and Accessibility go hand and hand

From: Judith Blankman
Date: Mon, Aug 21 2017 12:29PM
Subject: Re: Bright yellow as a navigational background color
← Previous message | Next message →

Hi Joan,

Tried to see what I could find in design publications. If you want places to go digging, try A List Apart or Smashing Magazine.

Instead of specifically targeting accessibility, you might need to seek guidance about good design which advises some bright color but not too much or to combine bright color with neutrals. While this is definitely an accessibility issue, it's also a usability issue. Articles on color theory might also help.

Here's the closest I could find to some advice about adjacent bright colors.

https://www.smashingmagazine.com/2010/02/color-theory-for-designer-part-3-creating-your-own-color-palettes/

In this example, they are complementary and bright, a red adjacent to a green. No anchor link, so look for this phrase, which somewhat passively advises against this approach:

'Another complementary color scheme with a wide range of chromas. Notice how placing the brighter red and green colors next to each other, a sort of 'vibrating- quality is achieved on their edges. Be aware of this in your designs and make sure it's done intentionally, if it all.-


Best,

Judith Blankman

From: WebAIM-Forum < = EMAIL ADDRESS REMOVED = > on behalf of Joan Preston < = EMAIL ADDRESS REMOVED = >
Reply-To: " = EMAIL ADDRESS REMOVED = " < = EMAIL ADDRESS REMOVED = >
Date: Monday, August 21, 2017 at 11:04 AM
To: " = EMAIL ADDRESS REMOVED = " < = EMAIL ADDRESS REMOVED = >
Subject: [WebAIM] Bright yellow as a navigational background color

Hi all,

A user is using bright yellow (#FFFF000) as the background for a navigational bar and the drop down. The background of the banner above it is orange (#FF4400). The yellow by itself is hard to look at, adding the orange above makes it even harder to view the page. I tried to find a site to reference why having these bright colors could be a problem for some users, but didn't find one that explained well. I did watch Jared Smith-Rethinking Color and Contrast video on YouTube and I thought it was great, but was hoping I could like to a web page instead.

Does anyone know if a site that explains the issues of using bright colors?

Thanks,

Joan Preston
Web Accessibility Coordinator
ITS - California State University, Long Beach
Usability and Accessibility go hand and hand

From: Joan Preston
Date: Mon, Aug 21 2017 1:34PM
Subject: Re: Bright yellow as a navigational background color
← Previous message | No next message

Hi Judith,

Thank you for the link to the Smashing Magazine article! This should really help me explain the usability and the accessibility of the bright colors.

Thanks,

Joan Preston
Web Accessibility Coordinator
ITS - California State University, Long Beach
Usability and Accessibility go hand and hand


-----Original Message-----
From: WebAIM-Forum [mailto: = EMAIL ADDRESS REMOVED = ] On Behalf Of Judith Blankman via WebAIM-Forum
Sent: Monday, August 21, 2017 11:29 AM
To: = EMAIL ADDRESS REMOVED =
Subject: Re: [WebAIM] Bright yellow as a navigational background color

Hi Joan,

Tried to see what I could find in design publications. If you want places to go digging, try A List Apart or Smashing Magazine.

Instead of specifically targeting accessibility, you might need to seek guidance about good design which advises some bright color but not too much or to combine bright color with neutrals. While this is definitely an accessibility issue, it's also a usability issue. Articles on color theory might also help.

Here's the closest I could find to some advice about adjacent bright colors.

https://www.smashingmagazine.com/2010/02/color-theory-for-designer-part-3-creating-your-own-color-palettes/

In this example, they are complementary and bright, a red adjacent to a green. No anchor link, so look for this phrase, which somewhat passively advises against this approach:

'Another complementary color scheme with a wide range of chromas. Notice how placing the brighter red and green colors next to each other, a sort of 'vibrating- quality is achieved on their edges. Be aware of this in your designs and make sure it's done intentionally, if it all.-


Best,

Judith Blankman

From: WebAIM-Forum < = EMAIL ADDRESS REMOVED = > on behalf of Joan Preston < = EMAIL ADDRESS REMOVED = >
Reply-To: " = EMAIL ADDRESS REMOVED = " < = EMAIL ADDRESS REMOVED = >
Date: Monday, August 21, 2017 at 11:04 AM
To: " = EMAIL ADDRESS REMOVED = " < = EMAIL ADDRESS REMOVED = >
Subject: [WebAIM] Bright yellow as a navigational background color

Hi all,

A user is using bright yellow (#FFFF000) as the background for a navigational bar and the drop down. The background of the banner above it is orange (#FF4400). The yellow by itself is hard to look at, adding the orange above makes it even harder to view the page. I tried to find a site to reference why having these bright colors could be a problem for some users, but didn't find one that explained well. I did watch Jared Smith-Rethinking Color and Contrast video on YouTube and I thought it was great, but was hoping I could like to a web page instead.

Does anyone know if a site that explains the issues of using bright colors?

Thanks,

Joan Preston
Web Accessibility Coordinator
ITS - California State University, Long Beach Usability and Accessibility go hand and hand