Using colour

The way colour is used within a page can have a profound impact on users, as not everyone with sight sees colour in the same way. Additionally, ageing affects visual acuity, perception of contrast and colour saturation.

Recommendations

Use context, HTML markup or other styles, in addition to colour, to identifiably convey information.

If using a gradient or background image, progressively enhance an element's style from a solid background colour specified in CSS to the gradient or image background.

Ensure all* foreground-background colour combinations pass a WCAG 2.0 AA compliance* colour contrast check.

*all: where it cannot be adapted, stylised text in pre-existing logos and branding is exempt, but should make suitable use of image alternatives.
*compliance: exceeds a ratio of 4.5:1 for text 18pt (24px) or less in size; and 3.1 for larger text or bold text 14pt (19px) or larger.

Why it matters

Sufficient contrast between foreground/text and background colours enables users with low vision or colour deficiencies to access 91�ȱ� content without using additional assistive technologies. Be mindful that styles such as font weight can also have significant impact on perceived contrast.

Users who are blind, have low vision, or have colour deficiencies may not be able to differentiate content or states if colour alone is used. For example, when distinguishing the different segments on a chart or which tab/form field is selected.

It is helpful to provide alternatives for both sighted and non-sighted users, such as differentiable patterns in a chart (dots, stripes, etc.) and a table with equivalent information, or an icon that indicates state in addition to colour.

Be mindful that background images can fail to load and gradients can fail to render. So it is important to ensure a solid background colour style is set whenever more advanced CSS is used. This is an effective use of progressive enhancement.

Examples

Recommended:

<style>
    div {
        background: #333 url('/accessibility/forproducts/guides/html/using-colour/dark-grey-pattern.jpeg');
        color: #eee;
    }
</style>
<div>Content</div>

Not recommended:

<style>
    div {
        background: url('/accessibility/forproducts/guides/html/using-colour/dark-grey-pattern.jpeg');
        color: #eee;
    }
</style>
<div>Content</div>

Testing

Check the contrast of all visible text with its background, using a tool such as , or . Aim to exceed AA minimum contrast requirements.

Locate elements in a page that use colour to convey information or state, and check that this meaning is also conveyed by alternative means such as text, icon or pattern.

Simulate achromatopsia (no colour - monochromacy), using a tool such as or . Aim for page content that is still clear and meaningful without colour.