Color Me Accessible: Contrast

While improving color and color contrast to be accessible can prove technically to be some of the simpler changes to make within a website, there is often pushback on getting these changes in place.

It is no wonder too! Color and color contrast greatly affect the look of your website. These choices are typically based on established branding decisions or designs that cost a decent amount of the budget. Reworking color choices may require layers of approval at some organizations.

When advocating for improved color and color contrast use within a website, it is worth pointing out that designing for proper color contrast does not mean your website will be less visually appealing.

In Color Accessibility Workflow, Geri Coady points out that “Aside from being a powerful means of achieving visual hierarchy, contrast is also one of the best ways to increase the readability of individual page elements, particularly text.”

When you utilize proper color contrast within websites, you create your content's visual design to be inclusive and accessible to users with different visual abilities. Still, you are likely making your content easier to read and navigate for all of your users.

Making the case for color contrast improvements

When advocating for an improvement that will greatly affect your website, it is often best to discuss the different conditions that may affect your website visitors. People in decision-making positions need to understand why change is important. A little empathy may go a long way.

When we discuss color contrast improvements, we are trying to improve the website design so that website visitors with low vision, color blindness, and even people on the go using a mobile device in a bright setting can navigate and read your website content. Most organizations spend effort and money, figuring out how to drive traffic to their websites. We must ensure those visitors can utilize the website once they are there.

Another useful exercise is reviewing your website analytics to see what percent of traffic is via a mobile browser. Many organizations that have recently done this task have found such an overwhelming percentage of their traffic is mobile that they adopted a mobile-first design strategy moving forward.

What are the color contrast requirements for websites?

The World Wide Web Consortium’s WCAG 2.0 Success Criteria 1.4.3 Level AA Contrast (Minimum) states visual presentation of text and images of text (including text on images, icons, and buttons) must have a contrast ratio of at least 4.5:1 except for the following:

• Large Text: Large-scale text and images of large-scale text have a contrast ratio of at least 3:1;
  • Large-scale text is defined as text that is, at minimum, 18 points or 14 points bold.
  • The following show those corresponding font sizes:
    • Arial 18 pt
    • Arial 14 pt bold
• Incidental: Text or images of text that are part of an inactive user interface component, that are pure decoration, that is not visible to anyone, or that are part of a picture that contains significant other visual content, have no contrast requirement. The following show examples:

  

  

  

• Logotypes

  

What are the benefits of designing with contrast in mind?

• Reading and navigating your website becomes easier for
  • users with low contrast sensitivity, which is common in older populations
  • users with color blindness that make distinguishing between colors are difficult
  • users that do not have any specific visual difficulty at all
• The visual design of your content now functions better in varying light, such as sunlight and glare.
• Proper contrast can vastly improve your users’ mobile experience since viewport, different devices, and text resizing affect accessibility, readability, and navigation.

Test Your Contrast

• Color Contrast Checker – WebAIM

  This tool is super easy to use with slidebars to choose foreground and background colors. It includes “Pass / Fail” information for normal and large text as well as UI components.

• Link Contrast Checker – WebAIM

  Once again, WebAIM has provided a straightforward tool for checking contrast for link color, background color, and surrounding body text color. Slidebars and “Pass / Fail” information are there to help resolve any link contrast challenges you may encounter.

• No Coffee Vision Simulator – Aaron Leventhal

  This is an excellent tool for providing simulations of common vision problems. This tool helps you "stand in someone else’s shoes" and provide insight that will help you achieve your accessibilities goals.

References

• Color Accessibility Workflow by Geri Coady
• Color and Good Contrast – W3C
• Contrast and Color Accessibility - WebAIM
• WCAG 2.0 Success Criteria 1.4.3 Level AA Contrast (Minimum) – W3C