Juicy Studio Accessibility Toolbar for Firefox

Overview

The Juicy Studio Accessibility add-on for Firefox enables web developers to examine WAI-ARIA live region roles and properties, data tables, and test the color contrast of a web page. This procedure makes use of the color contrast function of the toolbar to test web pages to ensure that they have sufficient contrast for low-vision users to be able to read them.

Strengths

  • The tool is accessed conveniently through a toolbar or a Tools menu pick in Firefox and can be used in conjunction with other Firefox accessibility and web development add-ons.
  • It generates an accessible, easy-to-read HTML report in seconds that can be saved and forwarded to web developers or webmasters.
  • It’s point and click: no technical knowledge of HTML or CSS is needed to generate the report.
  • Violations are displayed in an obvious format.
  • It is based on the WCAG 2.0 standard.

Weakness

  • The tool cannot be used to evaluate graphic or Flash content.
  • It cannot evaluate text over a background image.
  • It cannot evaluate Photoshop mock-ups during the design phase of web production.
  • It must be used with another contrast tool to remediate a web page.

Step 1: Download and install the Juicy Studio Accessibility Toolbar

Procedure

  1. Download the Juicy Studio Accessibility Toolbar from the Mozilla website.
  2. Restart Firefox to activate the toolbar. The toolbar will appear in your browser window.

Screenshot

Screen shot of Download and install the Juicy Studio Accessibility Toolbar

Step 2: Navigate to web page and test

Procedure

  1. Navigate to the webpage you wish to analyze for contrast.
  2. Click on the color contrast analyzer tab and select the Luminosity Contrast Ratio setting
    (screen shot). Alternatively, you may choose the following Firefox menu pick:
    Tools > Juicy Studio Accessibility > Colour Contrast Analyser > Luminosity Contrast Ratio.

Screenshot

Screen shot of Navigate to web page and test

Step 3: View color contrast results page

Procedure

  1. A new tab will open up in the browser window with the color contrast analysis (screen shot). 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

Screen shot of View color contrast results page

Step 4: Determine which elements lack sufficient contrast

Procedure

  1. 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 (screen shot). Note that a conditional pass is accompanied by a comment (e.g., AA pass for large text only).
  2. 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.

Screenshot

Screen shot of Determine which elements lack sufficient contrast

Rules Evaluated with this Technique

Rules evaluated with Juicy Studio Firefox Colour Contrast Analyser
Test
Type
Description