2.3 Create contrast between foreground and background

View correlation with WAI checkpoints

Poor effective contrast between foreground (text, images, buttons, links, etc.) and background will prevent some people from accessing information - due to their visual capabilities or the device they are using.

Differentiate fore and background with good luminance (brightness) contrast:
- Avoid relying on colour contrast alone
Avoid:
- Light text/light background, e.g. white on grey
- Dark text/dark background, e.g. red on black
- Complex backgrounds, e.g. images, patterns
- Always avoid red/green combination
Choose opposing colours on the colour wheel:
- Dark colours with light colours
- Avoid adjacent colours

Tip: To test colour contrast, simply view your page in greyscale (screengrab and put in image editor).

Tip: A good tool for checking colour contrast can be found at the Vischeck website (www.vischeck.com).

Note for the teccies: In CSS always define both foreground and background colours

Poor: Avoid low contrast and complex backgrounds

A colour wheel: red, orange, yellow, green, blue-green, blue, violet, purple. Opposing colours create good contrast, adjacent colours do not

2.3 Create contrast between foreground and background

Recommendations

Examples