Skip to content

Color Contrast Deep Dive

Contributed by Jen Sanders

Overview

In Ms. Sanders's presentation "Color Contrast Deep Dive", she takes the audience through various aspects of color contrast. She references the Web Content Accessibility Guidelinesin her presentation. Sanders highlights many aspects of color contrast such as:

  1. The Importance of Color Contrast
  2. Components of the Theory
  3. Visual Elements: Vibration, Texture, and transparency

Key Takeaways

When one thinks of color contrast, a majority of them may not think of it being in a life or death situation. But that is exactly what was happening in the military in the 1940s. Many pilots were loosing their lives due to being unable to control their planes. Originally, the military attributed this to pilot error. They thought that since the cockpit was designed for "the average pilot" it should work for everyone. However, when actually taking a look at the individual pilots, the none of them fit their description. The cockpit was not designed for them and thus they were having issues controlling the plane. It can be seen that when one designs for the average user, it is designed for no one. By not using color contrast in this cockpit design, it benefited nobody. It can be seen that good color contrast benefits everyone, regardless of visual impairment or technological prowess.

In looking at the basics of color contrast, there is a great importance placed on accessibility. In particular, not impairing users due to disability, visual impairment, or color blindness. The overarching theme is wanting to create a good user experience for everyone. The core of color contrast is looking at the ratio between the color of the foreground in contrast to the background. The most common example of this is looking at text. Generally speaking, smaller text needs a higher contrast ratio than larger text.

The overarching visual appeal of the text and how it is perceived can sometimes override whether the color ratio is deemed acceptable. This can be seen in scenario's regarding vibration. Vibration is when color combination creates the appearance of depth or movement. This is most commonly seen with complementary or bright colors. The ideas of textures and transparency are also associated with color contrast and text, especially when that text is juxaposed on a image. Text can be hard to read when it is placed on top of these textured backgrounds. To fix this issue, one can use a callout. This means to have a background color behind the text or transparent layer to darken it. However, using a callout and or, in conjunction with, transparency can be tricky due to the potential issue of automated ratio tools not catching colors that are displayed. This, in turn, can give false positives or negatives in regards to ratio fo the color contrast. That is why it is paramount to look at the overall image and text as a whole when looking at the color contrast, not just the ratio.

Reflection

This course has but a great emphasis on digital literacy and expanding ones digital literacy. This presentation introduced me to tools that I would have otherwise not known about, such as instrument that calculate color ratios automatically. Now, I will be honest in saying that prior to watching this presentation, I was blissfully unaware of color contrast ratio as a concept. I knew about the general idea of color contrast and need for content to be legible for all viewers, regardless on potential visual impairment. However, I did not know that their were actual calculations that could be done do determine this ratio. I would like to think that presentation as a whole has expanded my digital literacy. While I may still struggle with actually implementing color contrast ratio tools in future projects, I am now aware that they exist and their subsequent basic functions. Moreover, my knowledge of the importance of color contrast and the potential consequences of bad contrast has not only on the overall look of the project but real life impacts as well. In regards to the Austin Healy redesign, while my group did not rework the colors that were used in that website, had a color redesign been needed, I now feel more equipped with handling color contrast as a whole.