Skip to main content

Color Me Accessible: Contrast

web accessibility icon

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.

Geri Coady, in Color Accessibility Workflow, 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 are not only creating the visual design of your content to be inclusive and accessible to users with different visual abilities but 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 so that people in decision-making positions can understand why the change is important. A little empathy may go a long way.

When we discuss color contrast improvements, we are trying to specifically improve the website design so that website visitors that have 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, it is important that we 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 are 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:
    • Inactive UI (button) Inactive UI Submit button example
    • Pure decoration (icon) (123) 456-7890 Icon example displaying mobile phone
    • Significant other visual content Example of an image with significant visual content - cluttered bookshelf captioned, I will judge you by your bookshelf
  • Logotypes: Text that is part of a logo or brand name has no contrast requirement. For example: Logo example of Abrams Comic Arts logo

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 all 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 color. It includes “Pass / Fail” information for normal and large text as well UI components.

Link Contrast Checker – WebAIM
Once again, WebAIM has provided an incredibly easy 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 can 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

Maggie Vaughan, CPACC

~ friend of DubBot, A11Y practitioner in higher ed

This entry has 0 replies

Comments open

Leave a reply

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>