Color Contrast

Sufficient color contrast is necessary for visually impaired users to view your web content. This page explains how to evaluate your web page’s color contrast. We will be using the Juicy Studio add-on for Firefox because it works on Macs, PCs, and Linux platforms, and because it displays the results in a very convenient HTML table format. Because this tool examines the information in your style sheet to calculate the contrast, it cannot be used to evaluate graphic or Flash content, and it cannot evaluate text over a background image. In such cases you must sample the colors in the image and manually using a tool such as ColorZilla and then enter the hex codes in another contrast checking tool to determine the contrast.

The procedure

  1. Download and install the Juicy Studio Accessibility Toolbar from the Mozilla website.

  2. Navigate to the webpage you wish to analyze for contrast.

  3. Choose the following Firefox menu pick: Tools > Juicy Studio Accessibility > Colour Contrast Analyser > Luminosity Contrast Ratio.

  4. A new tab will open up in the browser window with the color contrast analysis. The analysis is formatted as a 5-column HTML table describing the code element containing the contrast, the parent nodes containing the code element, a color sample of the text/background combination, the hex codes of the text and background, and the WCAG 2.0 luminosity contrast ratio of the sample.

    Screenshot of Gez Lemon results page table layout
  5. Page elements that fail to meet WCAG 2.0 Level AA standards are flagged by a (fail) message next to the luminosity contrast ratio, and the row background color is yellow. Note that a conditional pass is accompanied by a comment (e.g., Double-A pass for large text only).

    Screen shot of flagged item in table
  6. You can save the page to an HTML file for future reference or forward it to the web developers or webmaster of the site in question to alert them to the problem. If you are the web developer, continue to next step.

  7. In the example above in Step 6, the color with hex code #6699dd is too light for a white background. The contrast ratio is 2.9:1, when it needs to be at least 4.5:1 to pass WCAG 2.0 Level Double-A. The simplest strategy is to pick a color in the same family that will give adequate contrast. The WebAim contrast checker can be used to adjust the color by darkening or lightening your original color until it meets the Double-A standard. Enter the foreground and background colors into the input fields to determine the contrast.

    screen shot of WebAIM color contrast analyzer page
    Note that the tool also shows you both Double-A and Triple-A compliance for normal and large text, and provides visual samples as well.

  8. If the contrast is insufficient, the WebAIM tool offers three convenient ways to adjust the color: the color picker, the lighten-darken slider bar, or the “lighten” and “darken” links. Using the slider bar or “darken” link, we can quickly find a color that satisfies the Double-A requirements: #5078ad.

    screen shot of WebAIM color contrast analyzer tool with #5078ad color
  9. Go back into your style sheet or web page and replace the previous hex code and run the evaluator again to ensure that the contrast is sufficient.

  10. Repeat Steps 7–9 as necessary for each flagged contrast element.

    11. back to top