yamahasynth.com forums

This is the place to talk about all things related to Yamaha Synthesizers!
  1. Jason
  2. Site Feedback
  3. Thursday, 14 June 2018
In the desktop version of yamahasynth.com (with browser window sufficiently "wide" ) - we see a menu across the top of the screen. The contrast is good - a darker purple background and white foreground. For the same information in the mobile experience (with a screen of small width) - or when shrinking the width of the browser in the desktop, the data is presented differently in a "hamburger menu". This is a reasonable difference in presentation. However, the colors chosen are black background and darker gray text color. The contrast is very low on a platform where there is less opportunity to adjust and often less time to "fool with".

This is not my first contrast feedback. One of Yamaha's recent keyboard products suffers from a contrast issue on the choice of color for printing categories on the instrument. They are dark blue with a black background. A color combination specifically called out as difficult to read by the FAA Human Factors Standards.

https://colorusage.arc.nasa.gov/guidelines_0.php

NASA and the FAA are not exactly serving the musical instrument industry, but the concepts are fairly universal. For web-based content, perhaps the WCAG would be a more suitable standard:

https://webaim.org/blog/wcag-2-0-and-link-colors/

The general guideline here is a contrast ratio of 4.5:1.

Further tools and criterea:

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

The colors chosen for the "hamburger menu" are #242427 background and #7c7c7d for unselected text (which is most of the text). The text size I believe would be considered to be "small" for this menu. The contrast ratio is 3.71:1 which is below the recommended minimum of 4.5:1.

Even if I do increase the luminosity ratio to meet criterea (#242427 background and #8c8c8d foreground) - the color choice of dark grey on lighter grey is, for me, still a low contrast choice. Particularly for a main navigation item such as this - and also factoring in that in the mobile space, where this menu is most likely to be used, then there are "brightness" settings which a phone adjusts to save battery -- and often this will "compress" the true effective ratio down. Even on a desktop - laptops and tablets are more prevelent and will "dim" the screen -- so these luminosity values are no longer "true". It is best to look at the website visuals for key navigation elements as a worst-case assumption where such mobile / semi-mobile devices will be used in lower power modes with screens dimmed.
Responses (1)
Amy Nedoss Accepted Answer Pending Moderation
Yamaha
Jason,
Thank you for your feedback on the navigation "hamburger" colorations. We will be sure your feedback is forwarded to the web design team.

Best,
Amy - Community Coordinator
  1. 3 days ago
  2. Site Feedback
  3. # 1
  • Page :
  • 1


There are no replies made for this post yet.
However, you are not allowed to reply to this post.
2018 © Yamaha Corporation of America and Yamaha Corporation. All rights reserved.