Skip to main content

Font Size: A A A Contrast: Black on white contrast White on black contrast

AccessColor - Online Tool for Colour Contrast

About AccessColor

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. Assuring that you provide enough color contrast between foreground and background colors takes time and we hope that this tool will help web developers to build accessible websites by visually flagging the section(s) of a page with problematic color combinations. AccessColor will find the relevant colour combinations within your HTML and CSS documents rather than requiring you to find each value to input yourself in order to test the contrast between each colour combination.

Color brightness formula

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.

The formula suggested by the World Wide Web Consortium (W3C) to determine the brightness of a colour is:

((Red value X 299) + (Green value X 587) + (Blue value X 114)) / 1000

Two colours provide good colour visibility if the brightness difference is greater than 125 and the color difference is greater than 500.

AccessColor results

AccessColor uses the colour contrast algorithm suggested by the Accessibility Evaluation and Repair Tools (AERT). It will analyze both external and internal CSS and then calculate the color contrast and color brightness between the foreground text and the background for each element in the DOM.

The tool can either show a report with each line of the HTML document containing text is presented, or can display just the errors and warnings.

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.

To help associate the section mentioned in the report with the correct section of the HTML document, a sample of the HTML text referred to in each line of the report is displayed in the 'Sample' column.

Limitations

AccessColor examines only the difference between foreground and background colors for text elements. This tool is intended for websites where most of the text is not written on background images or with flash. If an image is used for background, then the color difference and color brightness will not be able to be calculated and the value displayed will be n/a . It is not taken into account the absolute position of an element, so it possible to have visually a different background on the site compared with the one from AccessColor report. Dynamic changes and mouse over effects (such as hover) are ignored.

Check URL
Show

© 2004 - 2014 Access Keys