Missouri State University

Skip to content Skip to navigation
a b c d e f g h i j k l m n o p q r s t u v w x y z

Web Strategy and Development Blog

  • Web Strategy and Development
  • Web Support
  • @msuweb

Accessibility series: color contrast

April 7, 2017 by Mary Chiles

Share this post:

  • Twitter
  • Facebook
  • LinkedIn
  • Pinterest
  • Pocket
  • Tumblr
  • Email

Welcome to our series of posts entitled: how to make your website accessible! So far we have discussed the ethical and legal reasoning for why accessibility is important, and how to write alternative text.

Today we focus on color contrast.

Have you tried reading black letters on a red background? What about red letters on a maroon background? You might want to add some color to your website, but how do you ensure your site is still readable?  The color contrast between the text and the background affects readability.

The contrast should be 4.5:1. This is the comparison between relative luminance of the first number compared with the second number. The good news it is easy to check. This color contrast site shows foreground and background color.

How to test

For foreground, click on the box for a color wheel and find the color of the font you are using. Click on the appropriate color to select it. It will show a small square in the color you picked.

Then, for background, repeat this step.  It will also show a small square in the color you picked. You will see a color contrast ratio that automatically adjusts based on your color wheel selections. Make sure the ratio is 4.5:1 or greater.

Let’s return to the initial example. To pick colors, you will want to use the branding recommendations to ensure a consistent appearance.

First, let’s check black text against the Brick City Red background:

color contrast checker of black letters on red background

Perfect! The ratio is greater than 4.5:1, so this combination passes accessibility standards.

A word of warning: Some color combinations look like they “should” be readable, but are they? For example, take the Brick City Red text on Missouri State Maroon background. Let’s check.

color contrast checker of red type letters maroon background

Nope! The color contrast ratio of 2.7:1 does not meet the accessibility standard of at least 4.5:1.

  • About the Author
  • Latest Posts

About Mary Chiles

Mary Ellen Chiles is a graduate student in the English department, where she is completing a Master's of Arts in Creative Writing with a nonfiction emphasis.

  • Accessibility series: descriptive links - April 20, 2017
  • Accessibility series: color contrast - April 7, 2017
  • Free photo days for faculty and staff - April 6, 2017
  • Accessibility series: alt text - April 3, 2017
  • Social media kit: Fourth annual Missouri Public Affairs Hall of Fame - February 7, 2017
  • Top 5 reasons to add an event to master calendar - January 17, 2017
  • Blogging inspiration: share an event - November 29, 2016
  • Social Media Kit: Community Engagement Project - November 8, 2016
  • Social Media Kit: Tour of the Globe - November 1, 2016
  • You are my inspiration: ideas to support your blogging - November 1, 2016

Filed Under: Accessibility, Web Press, WordPress blogs Tagged With: Accessibility, color contrast, Web Press, WordPress

Share this post:

  • Twitter
  • Facebook
  • LinkedIn
  • Pinterest
  • Pocket
  • Tumblr
  • Email

Subscribe

Enter your email address to subscribe to this blog and receive notifications of new posts by email.

Follow @MSUWeb

My Tweets

Calendar

  • Complete Calendar

Categories

  • Accessibility
  • brand
  • email marketing
  • Mobile
  • News
  • Omni CMS
  • Redesign
    • Academic websites
    • Web redesign 2015
  • Social media
    • Social media kit
  • template
    • updates
  • Training
  • Video
  • Web Press
  • web strategy and development
    • Technical
  • Web Support
  • WordPress blogs

Meta

  • Log in
  • Entries feed
  • Comments feed
  • WordPress.org

Connect with web strategy and development

  • Twitter

Make your Missouri statementMake your Missouri statement
  • Last Modified: April 7, 2017
  • Accessibility
  • Disclaimer
  • Disclosures
  • EO/AA/M/F/Veterans/Disability/Sexual Orientation/Gender Identity
  • © 2013 Board of Governors, Missouri State University
  • Contact Information
 

Loading Comments...
 

    loading Cancel
    Post was not sent - check your email addresses!
    Email check failed, please try again
    Sorry, your blog cannot share posts by email.