4.21 Using Color Contrast

Color contrast between the background and foreground affects the readability of the content.
If the contrast is too small, the text and background can flow into one another and so the text disappears or becomes difficult to read for people with different types of color deficits or people who are using monochrome displays.

Guidelines:

  • Ensure that foreground and background color combinations provide sufficient contrast for navigation
  • Dark and light contrast shall be used on all occasions
  • The contrast ratio should be at least 5 to 1 for normal text, and 3 to 1 for large bold text

Validation Technique:

  • Run the image through Vischeck or color contrast analyzer to simulate how the page will look if viewed by a color-blind person.
  • Print the web page to a black and white printer
  • Listen to the web page using a screen reader or speech synthesizer
  • Observe page contrast - light characters on a dark background or dark characters on a light background

Contrast Between the Background and Foreground Colors
Enlarge Enlarge

Graphics , Images and Multimedia

Images can set the tone of a page. A good image can help to make the page more visually appealing and reinforce the message of your page. Generally web images take up the majority of the download time in most web pages. This can be improved by making the graphics as small as possible.