In this lesson
Using Colour
People with weak eyesight, dyslexia, using a monochrome monitor, or working in poor lighting conditions need to have a clear colour contrast between the foreground text and the background in order for the web page to be accessible.
Colour contrast
Text should be displayed with the highest possible contrast. There is some research evidence to suggest that many older or partially sighted users prefer light (white or light yellow) letters on a dark (black or dark blue) background. However, unless you are targetting only people with weak eyesight, the traditional dark on light may be aesthetically preferable.
If you are delivering an artistic web site where the client is adamant that the site has insufficient colour contrast then you can do one of the following:
- If you are using a data driven server using PHP, ColdFusion or similar you can allow the user to select a different style-sheet using an HTML link that calls the same page but with a value that enables the alternative style sheet.
- Provide a separate copy of the website that uses a higher contrast stylesheet. This is a very poor solution as it requires you to constantly check that the content of the alternative version is up-to-date.
- Use a script that sends a cookie to the user and then looks to see if the cookie is set, and if so select a high contrast style sheet. Remember to include a <noscript> alternative that provides a link to the alternative version suggested in point 2 above. This is a preferable solution to using an alternative by itself because most of the people who might benefit will have java enabled, so only a few will actually use the alternative website and the risk of delivering out-of-date information is reduced.0
Checking colour contrast
Colours used for web pages are defined using hexadecimal numbers (0 to F). Contrast can be checked by comparing the numerical value of the two colours. One colour (either foreground or background) should be at least three times larger than the other. For the most accessible contrast the difference should be five times greater. The mathematics can be difficult so there are various tools available for checking colour contrast options. A good one is at http://gmazzocato.altervista.org/colorwheel/wheel.php. Please note that all colours should be defined using their numeric value, the use of names (red, blue, yellow etc,) has been deprecated (removed from the HTML standards) and may not be supported by newer technologies.
Using colour to convey information
Never use colour alone to convey information. Users of screen readers, text only browsers, monochrome monitors cannot distinguish colours at all, whilst people who are colour blind can easily get confused. Classic examples of bad practice include:
- "Click on the green button to continue" (Barclays on-line banking - since corrected)
- "Please complete the form fields shown in red" (many, many on-line forms)
Always include textual clues when providing instructions such as :
- Click on the green "Continue" button (note: the button has the word "continue" as its value)
- Please complete the fields for your name and email address (note: you can still highlight these in red for visual users)
Another helpful thing you can do is to provide hidden clues for blind users when you use different coloured backgrounds to mark out portions of text such as examples. When I provide an example of code in these lessons I separate it from the main text of the lesson by enclosing it in a blue box. This works well for visual users. Blind users do not get this visual clue and can get confused. So, to help blind users I also include an opening phrase such as "example of code" at the beginning of the box with a closing phrase such as "end of example" at the end. I use a CSS class to hide these phrases (display:none) from visual users who don't need them.
Lesson Summary
- It is important to use a font face that is easy to read on a computer screen. Recommendations are Verdana and Arial
- Longer lines of text should be spaced out to help the reader follow each new line
- Text should not be justified
- Offer a selection of fonts in case your first choice is not available
- Always use proportional font sizes
- Pseudo elements do not provide any structural (semantic) information
- Colour contrasts should be at least 3:1, preferably 5:1.
- If you have to use a poor colour contrast you should provide a "high definition" alternative
- When setting foreground colours in CSS always set a contrasting background colour at the same time
- Do not rely on colour for providing information
- When colour is used to define an area of content include clues that blind people can use
References
- Colour Wheel - http://gmazzocato.altervista.org/colorwheel/wheel.php
- W3C Accessibility recommendation - http://www.w3.org/TR/WCAG10-CSS-TECHS/#style-color-contrast
- Lighthouse International, Effective Colour Contrast - http://www.lighthouse.org/accessibility/effective-color-contrast/