« Back to Fireday

Color Contrast Analyzer

October 19th, 2007 at 5:00am — Rating: Firefox pointFirefox pointFirefox pointFirefox pointFirefox pointLink

If you're a developer or beginning designer, you've no doubt been having problems with color schemes and determining what colors would make your site stand out.

While this extension won't pick colors for you, this extension provides the proper feedback to tweak your color settings for optimal viewing of your web site.

Overview

Color Contrast Analyzer takes the current site you're viewing and generates a complete color contrast report. It compares the foreground colors with the background colors, so only elements that contain text are analyzed in the DOM.

Installation

Quick and painless. After the installation and Firefox restart, the Color Contrast Analyzer appeared in the Tools pulldown menu and also in the context menu when you right click on a web page.

Features

At first, I thought the Color Contrast Analyzer sent whatever page you are on to their web site for analysis.

Wrong! It's actually built into the extension. Very cool.

To activate the Color Contrast Analyzer, right-click on the page, click on the Color Contrast Analyzer, and select All. The extension will take the current page, analyze it, create a new tab, and generate a report in that tab based on its findings (no URL in the address bar when viewing the report in the tab)

Everything is in a table report and compares the foreground and background colors with each other. The report is broken down into the following columns:

  • Element (H1, H2, P, etc.)
  • Parent Nodes (H1, H2, P, etc.)
  • Sample of the foreground/background
  • Color (foreground)
  • Background Color
  • Luminosity Contrast Ratio (available in "All" and "Luminosity Contrast Ratio" report)
  • Difference in Brightness (available in "All" and "AERT Colour Contrast Algorithm" report)
  • Difference in Color (available in "All" and "AERT Colour Contrast Algorithm" report)
  • Pass/Fail status

If your colors passed the test, the row in the table will appear normal. If they didn't pass the test, they appear as a yellow row indicating they failed. Well, back to the drawing board.

The other tests, Luminosity Contrast Ratio and the AERT Colour Constrast Algorithm, provide more details on how a color's luminosity is and how the site stacks up to the Accessibility Evaluation and Repair Tools (AERT). Based on the individual reports, some columns won't be available.

Configuration

Unfortunately, there isn't any configuration settings for this extension. And to be honest, I don't think it needs any configuration at all. It stands on its own quite well.

The extension is also intuitive. Intuitive in the way that for every page you visit, if you want to get a report of the current page, right-click to analyze it. It doesn't matter if the page is on the Internet or you're developing it locally (on localhost). You'll get the report in a brand new tab.

Conclusion

The Color Contrast Analyzer's reports are very thorough and make me sit up and take notice of my site. Ever since the incident with Target.com, freelancers and small design shops may want to grab this extension just as a piece-of-mind for future safety.

With everything contained in the extension, the Color Contrast Analyzer is great for accessibility testing and assists with how sites should be designed: with the user in mind.

The Color Contrast Analyzer receives a 5 out of 5.