Excerpt from Techniques For Accessibility Evaluation And Repair Tools

Checkpoint 2.2 - Ensure that foreground and background color combinations provide sufficient contrast when viewed by someone having color deficits or when viewed on a black and white screen

Technique 2.2.1 [priority 3] Test the color attributes of the following elements for visibility:

Evaluation:

• Elements:
  • BODY bgcolor | text | alink | link | vlink | background =anything OR
  • TABLE bordercolor | bgcolor =anything OR
  • TD | TH bgcolor =anything OR
  • HR color =anything OR
  • any_element style="any_color_specification"
  • STYLE "any_color_specification"... STYLE
  • Where any_color_specification is defined as any CSS specification which contains:
  • color | background-color | background-image | background
• Requirement: Determine color visibility.@@needs work?

Ideally, images and multimedia object should also be tested for color visibility but algorithms are beyond the scope of this specification.

Color visibility can be determined according to the following algorithm:

(This is a suggested algorithm that is still open to change.)

Two colors provide good color visibility if the brightness difference and the color difference between the two colors are greater than a set range.

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))

The rage for color brightness difference is 125. The range for color difference is 500.

Suggested message:

Poor visibility between text and background colors.
Suggested repair:

Allow the user to change the poor color combinations.
Store any good color combinations entered by the user and use them as default prompts in the future.

from open-color.

https://www.w3.org/TR/UNDERSTANDING-WCAG20/visual-audio-contrast7.html

18 point text or 14 point bold text is judged to be large enough to require a lower contrast ratio. (See The American Printing House for the Blind Guidelines for Large Printing and The Library of Congress Guidelines for Large Print under Resources).

The ratio between sizes in points and CSS pixels is 1pt = 1.333px, therefore 14pt and 18pt are equivalent to approximately 18.5px and 24px.

from open-color.