AccessColor – Online Tool for Color Contrast

Check the Color Contrast of Your Website

“AccessColor tests the color contrast and color brightness between the foreground and background of all elements in the DOM to make sure that the contrast is high enough for people with visual impairments.” Read more

To conform with Web Content Accessibility Guidelines 1.0, foreground and background color combinations should provide sufficient contrast when viewed by someone with low vision or colour blindness, or when viewed on a black and white screen.

Two types of error messages may appear in the report:

  • Warnings appear when either colour contrast or color difference fail for an element’s foreground and background colors.
  • Errors appear when both color contrast and color difference fail.

Step 1 – Run your site through the Color Accessibility Checker. You will receive a report that looks something like this:

color-report

Step 2 – Highlight the foreground color and go to http://slayeroffice.com/tools/color_palette/ Copy the foreground color to the Base Color | Click OK

color-pallette-tool

Step 3 – Take a darker color and replace the color that produces the error with the darker color. I use search and replace to find all instances of the color. You may have to do this a couple of times to get a good enough contrast that will “pass the test.” NOTE: If you are using a dark background color, you may find you will need to change it rather than the foreground color.

Step 4 – I go through each of the colors that produces an error until the site passes the test . The AccessColor results show that for this page, both color difference and color brightness meet the recommended standard .

color-report2

NOTE: Please note that the tool works the best with valid HTML pages. You can validate your page at http://validator.w3.org/

Comments

  1. Nice tool Pat!

    For those who wish to understand why colour contrast is important beyond the Web Content Accessibility Guidelines we have an article, Effective Colour Contrast, which provides information on how this applies to your regular visitors also.

Speak Your Mind

*