Accessibility - Colour
-
Ensure that all information conveyed with color is also available without color
-
Ensure good contrast between text and background colours
-
Choose colour schemes carefully and avoid strongly patterned backgrounds
Don't rely on colour alone| - Ensure that text and graphics are understandable when viewed without colour
If a web page conveys information solely by colour, users who cannot distinguish certain colours and users with devices that have non-colour or non-visual displays will not be able to make use of the information. You need to provide an alternative way of making the information available eg from context or markup. Note also that, if you remove the underline from linked text, this will make colour the only visual cue that a link is present so, use a small graphic or some other visual representation that a link is there.
A web page with poor background colour/image contrast will cause problems for some users - always use either light text on a dark background or dark text on a light background to provide good contrast| and make sure that text can be clearly read at any location against the background. A good test for such a contrast is to view your pages in black and white mode. See the Safe Web colors for color-deficient Vision| for more information on colour combinations and try Web-safe colorizer| to test all web-safe colour background/foreground combinations.
Most colour blind people have trouble viewing greens and reds. So consider this when choosing foreground/background colour schemes.
Avoid
-
Bright red text on a bright blue background as this causes ghost effect
-
Text colours in the same colour family as the background colour
-
Background images that make text difficult to read.
-
Red/green or Blue/yellow colour combinations as colour-blind students may be unable to read this.
When defining text and background colours, either define everything or nothing at all. If, for example, you define a white background and a user has defined say yellow text, your page could end unreadable unless you have defined all colour schemes:
-
background colour (always define, even when using a background image)
-
colour of link
-
colour of activating link
-
colour of visited link
-
text colour
Example:
<BODY BACKGROUND="image.gif" BGcolor="#ffffff" LINK="#990099" VLINK="#009999" ALINK="#000099" TEXT="#000000">
To change background/link colours in FrontPage:
-
From the File menu, click Properties to take you to 'Page Properties'
-
Select the Background tab and, under 'colors', enter desired colours
To change background/link colours in Dreamweaver:
-
Select Modify - Page Properties
-
In the Page Properties dialog box, select colours for background/links
Testing if Colour is used Appropriately
-
View pages on a black and white monitor or print to black and white monitor. Is the page understandable?
-
Turn off all graphical images - is any content lost?