Luminosity Contrast Ratio Main Colour Contrast Analyser

Wednesday, 7th January 2009

Author: Gez Lemon

AERT Suggested Algorithm

The 26th of April 2000 working draft for AERT contains a suggested algorithm to calculate the contrast of foreground and background colours, based on the YIQ colour space previously used by the NTSC television standard:

Color brightness is determined by the following formula:

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

Note: This algorithm is taken from a formula for converting RGB values to YIQ values. This brightness value gives a perceived brightness for a color.

Color difference is determined by the following formula:

(maximum (Red value 1, Red value 2) - minimum (Red value 1, Red value 2)) + (maximum (Green value 1, Green value 2) - minimum (Green value 1, Green value 2)) + (maximum (Blue value 1, Blue value 2) - minimum (Blue value 1, Blue value 2))

A colour brightness difference of over 125 and a colour difference of over 500 is a pass using this algorithm.

Absence of an Official Algorithm

In the absence of any other published algorithm to determine colour contrast, I decided to use the proposed AERT algorithm to test for colour contrast. The algorithm was better than nothing, but there were problems with the algorithm failing colour combinations that were obviously good, and allowing colour combinations that were obviously poor.

The biggest problem with the AERT algorithm is that the colour difference was too strict and barred obviously good colour combinations. To get around this restriction, Hewlett Packard lowered the threshold to 400. The algorithm also allowed colour combinations that were obviously not good, such as #f80 and #00f (bright blue on orange). The colour combination is difficult to read, yet passes the AERT algorithm. The difference in brightness is 127 (threshold is 125), and the difference in colour is 646 (threshold is 500).

Luminosity Contrast Ratio

The Luminosity Contrast Ratio algorithm, developed by Gregg Vanderheiden, Dave Kelso, and Aries Arditi at the Trace R&D Center has been adopted by WCAG 2.0. Success Criterion 1.4.3 requires the visual presentation of text and images of text has a contrast ratio of at least 4.5:1, except for the following:

• Large Text: Large-scale text and images of large-scale text have a contrast ratio of at least 3:1;
• Incidental: Text or images of text that are part of an inactive user interface component, that are pure decoration, that are not visible to anyone, or that are part of a picture that contains significant other visual content, have no contrast requirement.
• Logotypes: Text that is part of a logo or brand name has no minimum contrast requirement.

The luminosity algorithm provides much better results than the old AERT algorithm. The obviously poor colour combination of bright blue on an orange background (#f80 and #00f) yields a luminosity contrast ratio of 3.59:1 — a failure of success criterion 1.4.3, except for large text.

Colour Contrast Services

The old URL for the AERT colour contrast service on this website now redirects to the luminosity contrast ratio analyser (HTTP 301: moved permanently). The old AERT colour contrast analyser is still available, but through the new URL. The Juicy Studio Accessibility Toolbar and the Colour Contrast Analyser Firefox extensions will continue to include the AERT algorithm alongside the luminosity contrast ratio algorithm in the meantime.

Category: Accessibility.