Colour Contrast Access Keys Criterion

Make certain that foreground and background colours have sufficient - contrast. This includes both text on a background colour and text within an image or over a background image.

• Text and background should contrast sufficiently so that users with low vision or with contrast turned down on their monitor - or using a mobile device in poor lighting conditions - can read the text. This also applies to text/background shades that create a bad combination for colourblind users.
• We will manually assess any images with text included within the image.
• Ideally websites should try to use text as text so it is always accessible to people not using a monitor or using a text browser. If this is not possible, include the text in the alt for the image.
• The spider will check if text and background have sufficient contrast.
• The W3C uses the following formula to determine brightness:

  Brightness =

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

  The difference in contrast between two colours is determined with the formula:

  Contrast =

  (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 range for color brightness difference is 125. The range for color difference is 500.

  The spider finds the styles and tags involving colors on your page and calculates the differences between background and text colours to determine if they fall within the allowed ranges.

• A manual check will also examine images, navigation, tabs, etc.
• Points -
  • Three points if everything has the correct contrast.
  • Two points if the main content and the navigation have the correct contrast.
  • One point for just the main content.
• Criterion weighting of two.