Color Contrast - Easy Checks

What is Color Contrast?

Color contrast refers to the contrast between:

The following images show an example of the same part of a webpage. The first example has poor contrast and the second one has good contrast.

Example of webpage with poor contrast Example of webpage with good contrast

Technically, color contrast is the relative luminance of two or more colors to each other, particularly between text and its background. The tools we can use to measure this take care of the math and make checking that we have enough contrast easy.

Why is Color Contrast important?

Good contrast is important for many people with low vision who have reduced contrast acuity. People with color deficient vision (‘color blindness’) often need good contrast too.

Checking Color Contrast

Quick check

Determine contrast issues by viewing the page in grayscale.

Click on the button below:

Check grayscale on this page

This gives a rough check as to whether the text on the page is easily read or needs increased contrast.

To return to full color, close the dialog that appears.

Checking other pages

To check other pages you need to add the check link as a bookmark.

  1. Make sure your browser bookmarks bar is open. Ctrl/CMD+Shift+B will usually toggle the bar
  2. Drag this link to your browser bookmarks bar: Convert to grayscale
  3. Visit the page you want to check
  4. Click on the ‘Covert to grayscale’ link in your bookmarks
  5. To return to full color, close the dialog that appears
  2. Make sure your browser bookmarks/favorites bar is open. Ctrl/CMD+Shift+B will usually toggle the bar
  3. Create a bookmark to this page using Ctrl/CMD+D
  4. Edit your bookmarks - this varies depending on browser and operating system. There is usually a menu option to manage your bookmarks
  5. Edit the newly added bookmark to this page
  6. Paste the script copied into the URL or Link field

Accurate check

Tools are available to help you test more thoroughly. These will do the math and tell you if the colors meet the correct ratios for sufficient contrast.

Search the Evaluation Tools List for ‘color’ or ‘colour’ to find tools that will help.

Some tools allow you to sample the colors directly. For example, by using an eye dropper to select the colors. Other tools need you to know what the color code is for the colors being checked. For example, RGB (238, 208, 9) or Hex #eed009 is the code for a gold/yellow color.

Learn more

Back to Top