Color Contrast

Introduction

Adequate color contrast is one of the most commonly overlooked accessibility issues but plays a critical role in providing equal and accessible access to information. According to the W3C, the intent of adequate color contrast "is to provide enough contrast between text and its background so that it can be read by people with moderately low vision."

The most common color contrast issues found in the GVSU CMS are on user-uploaded images.


Basics

All of the features of the GVSU CMS are built with color contrast in mind. However, the CMS cannot determine if a user uploaded image has adequate color contrast. Visual presentations and images need to maintain a minimum contrast ratio of at least 4.5:1. The contrast ratio cannot be round up to 4.5:1 if it is close. For example, white text on a commonly-used shade of gray (#777777) has a 4.47:1 contrast ratio and does not meet the minimum contrast ratio requirement

The following are exceptions to the color contrast ratio requirement:

  • Large Text:  Large-scale text needs to have a contrast ratio of at least 3:1.
  • Incidental: Text or images 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.
  • Logos: Text that is part of a logo or brand name has no contrast requirement.
White text on light red background demonstrating an inadequate color contrast ratio
White text on green background demonstrating an adequate color contrast ratio

How To

There is no one "best" tool for testing color contrast. The tools that you use will depend on your personal preference and the type of content being that is evaluated, however, the following are recommended tools:

Color Contrast Checker

  • WebAIM: Contrast Checker - presents the contrast difference between two colors, and will help you identify a color that meets the desired level of contrast.
  • Contrast Ratio - Contrast Ratio: Easily calculate color contrast ratios. As you type, the contrast ratio indicated will update. Passing WCAG was never this easy!

Color Picker

  • ColorZilla Chrome Extension - With ColorZilla you can get a color reading from any point in your browser, quickly adjust this color and paste it into another program.
  • Image Color Picker - With this online tool you can upload an image or provide a website URL and get the RGB Color, HEX Color and HSL Color code.


Page last modified July 29, 2021