Day 17: Color Contrast: Tale of Two Signs

Mexican restaurant digital menu with different fonts, colors, and images.
I recently went to local, casual Mexican restaurant for lunch that I haven't been to in a while. It's a popular place where you can almost always expect to wait in a line to order before seating yourself. New on this visit, the large menus that used to hang on the wall behind the cashier counter have been replaced by 4 very large TVs displaying the menu digitally.  As I waited in line, I kept having to look at the ground because I found the menu so disorienting and provides a great example of how color and contrast affects the perception of digital content.

How Design Choices Affect Accessibility


    Burrito Menu with different fonts and colors
  1. Font Choices: Notice that Burritos and other Headers are in a crisp, sans-serif font. Each menu item is in a completely different font with much thicker letters and less space between them which makes that font more difficult to read.
  2. Font Colors: The patterned font colors between the mustard color and the white causes the eye to struggle to focus. The choice to lists the menu item in mustard and then provide dots in white and then the price in amber again make this difficult to perceive. Take a moment and count the number of font colors used on the Fresh Squeezed Juice Section of the Menu. 
    Fresh Squeezed Juice Menu with 7 different font colors
  3. Background Color: The introduction of the semi-transparent gray background text boxes introduces even another color that also allows the background image to bleed through.
  4. Background Image: Combine all of the above with the background image that introduces even more colors and details that compete with the text and it makes the menu very difficult to read..
  5. Animations and Flashing Images: Not pictured but were also part of the display. Animations, such as fireworks obscured the text as they cycled through and some flashing pictures of food items. 
My disability does not affect my vision and I kept having to look away as I stood in line waiting and trying to decide what to order. I never found my desired choice on the menu and just asked for a Taco Salad when I reached the register.  Whether or not that was actually on the menu, I have no idea because it was so difficult to read because of color, text, and contrast issues. At that point, you have to question the purpose of the menu. I would return for the food but will probably choose to eat lunch somewhere else because of the menu appearance. 

Design for Everyone Sign with a large stripe in the background & smaller sign describing Oven mitts in black and white

Color Contrast Matters.

Color Contrast matters especially when we approach creating digital content with the mindset to Design for Everyone. This Design for Everyone signage from my local IKEA would have a very different effect if they used multiple fonts and colors. The inclusion of the background colors and the scale of the stripe doesn't interfere with the communication of IKEA's  message. And notice, all those design features were eliminated in the Oven mitt description sign to ensure adequate contrast and maximum readability so users can focus on the content.

If you are wondering how to avoid creating a Doc, Slide Presentation, or even a webpage where the colors and contrast interferes with the meaning,  The Web Content Accessibility Guidelines (WCAG 2.0) provide guidance on how to ensure accessibility of your online materials. In reference to contrast, the WCAG 2.0 guideline reads as follows: 

1.4.3 Contrast (Minimum): The visual presentation of text and images of text has a contrast ratio of at least 4.5:1, except for the following: (Level AA)
  • Large Text: Large-scale text and images of large-scale text have a contrast ratio of at least 3:1;
  • Incidental: Text or images of text that are part of an inactive user interface component, that are pure decoration, that are not visible to anyone, or that are part of a picture that contains significant other visual content, have no contrast requirement.
  • Logotypes: Text that is part of a logo or brand name has no minimum contrast requirement.
Level AA is the expected criteria to meet Section 508 compliance.

How to Create Accessibility

  1. Adopt the mindset to Design for Everyone at the beginning of your creative process.  
  2. Build an accessible color palette.  Here's a great accessible color palette builder.
  3. Check the color contrast of your digital work.  Here's a few tools:
    • Contrast Ratio: accepts rgb, hex codes, and color names and provides the contrast ratio
    • Color Contrast Analyzer: Chrome Extension that will analyze the contrast ratio of a web page or any digital file open within a Chrome tab. Anything outlined in white meets color contrast ratio guidelines, everything else needs to be changed to meet accessibility guidelines.
    •  WebAIM Color Contrast Checker: Need rgb or hex codes (I use the Chrome Extension ColorPick Eyedropper) to check contrast and provides textual guidance about text size and needed ratio to meet the WCAG 2.0 Guidelines
Think about the function of your digital content that you and your students create. The function is probably aligned with sharing information, communicating learning, and/or teaching others. If the design of that digital content interferes with the function, then it has failed to meet it's objective. Additionally, there is a likelihood that a segment of the population has been excluded from accessing that information and being part of the conversation. You can help create accessibility by being mindful of design elements like color contrast during the creation process to ensure the ultimate function of your digital content is met. 


Comments

Popular posts from this blog

Applying to #GoogleEI? Avoid These Common Autocaption Bloopers

Deaf Awareness Month Challenge

ISTE17 Presentation Materials