Style: Colour Contrast

Colour Contrast is available only with the beta version of Firefox Accessibility Extension.

Dialog Box

Colour Contrast List

1. This list itemizes foreground and background color combinations of following elements: headers (H#), table and the children elements, div, p, span, ul, ol, li, option, input elements which display text that should be legible -- buttons (submit, reset, and button) and data entry fields (text, file, password), etc.
2. The Extension examines elements with distinct IDs and first occurrence of each element with text that does not have an ID.
3. The Extension does not consider the color of a background image of the text.
4. The Extension does not consider the size or weight of the font.
5. Selecting an item in the list, by clicking on the item or by using the arrow keys, highlights the corresponding element in the browser, and populates the Example display of the color combination.
6.       Selecting an item with colored background, by clicking on the item or by using the arrow keys, displays related accessibility statement in the Accessibility Information area.
7. Columns
   • Order (Hidden) - The sequence in which the items appear on the page is displayed.
   • Text - The text content of the element is displayed.
   • Type - The class attribute of the element is displayed; if the class attribute is not available, this entry is left blank.
   • Tag - The name of the element with the color combination is displayed.
   • Colour - The color attribute or the CSS color property of the element is displayed; if neither is available, the default forecolor of the element is displayed.
   • BGColor - The bgcolor attribute or the CSS background-color property of the element is displayed; if neither is available, the default background color of the element is displayed.
   • Luminosity - The index of contrast between the Colour and BGColor of the element is displayed.
     Note: To get this index, the luminositites of Colour and BGColor are calculated from the RGB color code, and then the larger luminosity of the two is divided by the smaller luminosity.

Example

• The text Example of (Colour) on (BGColor) is displayed in the color combination of the selected item.

Accessibility Information

•   Fail: contrast ratio is below the minimal acceptable level (3:1)
•   Warn: contrast ratio is below the optimal acceptable level (5:1)
• Colour contrast cannot be determined for windows containing frames.
•   ToDo: Avoid using the deprecated color attribute on HTML elements for specifying color; use CSS instead.
  • font element is deprecated and color attribute for font element should not be used.

Buttons

• View Summary - opens a new browser window and displays the contents of the dialog box in the new browser window, allowing the user to see/print the entire data set.
• Close Window - closes the dialog box.