AccessibilityColour and contrast

Many users rely on colour and contrast being clearly visible to consume content or move through our services.

It is important contrast is clear, though there also should be alternatives for those who cannot see clearly.

See the colour page for the full list of accessible text and background combinations.

See the impact that colours with good contrast have on user interaction, or read about Lee, an online shopper with color blindness.

Helping everyone

When designing websites, it is important that you use sensible colours that make text, focus indication and other parts of your website easy to see.

The colours you choose for your websites can affect a number of users and make content hard for them to consume or move through.

If websites do not have clear contrast, it can make them completely unusable for some users with visual impairments or colour blindness. It can also introduce eye strain or other issues in other users.

While tools exist for users to change the contrast on their own, sometimes these don’t work. This could be because we have forcibly set the colour, or there may be other compatibility issues. Because of this it is always best to use approved colours as standard.

The basics

Do:

• check your website colour scheme for contrast standards (standard text 4.5:1, everything else 3:1)
• make sure your website works in Windows high-contrast mode
• check that you can clearly see where focus indication is on a screen at a glance
• ensure that users can change colours with Operating System (OS) or browser settings
• use standard GOV.UK components

Do not:

• use only colour to demonstrate information
• use only faded or other colours for greyed out (non-active) content without other identifiers
• use text colours that are hard to see against a background

Examples of users with access needs

User	Access need	May find helpful
Blind	Alternative instructions to visual content	Not using colour only to provide information Text-based instructions
Colour-blind or partially sighted	Colour selections can make text difficult to see or cause eye strain or migraines	High-contrast mode Adjustable colour settings Clearly visible elements including text and focus indication

Creating good content with colours and contrast

Measuring contrast

We measure how visually distinct a colour is by looking at the contrast ratio with surrounding elements.

For example, text would have the contrast ratio measured against the background colour.

Text contrast

The contrast requirement for text is 4.5:1 against the surrounding background colour.

For most GOV.UK services we use black text against a white background. This combination has a contrast ratio of 21:1, easily meeting the requirements.

Alternatively, bad contrast may be something like the following.

For large text (above 18pt font size), or non-text elements such as focus indication or icons, the contrast requirement is 3:1.

How users can change their contrast settings

There are tools which allow users to change the colour settings on their computer to make things easier to read.

One such set of tools that can help you test what users are seeing are the ‘colour filters’ and ‘high contrast’ options within the Windows Ease of Access Centre. These controls are often used by those with colour blindness, visual impairments or eye strain issues to make content easier to see.

Colour filters

Colour filters are a great range of options that allow users to tailor the colours they see on their screen. This can address issues related to colour blindness, such as turning everything greyscale, or address specific issues such as red-green colour blindness.

High contrast

High-contrast modes are a more significant visual change which often invert text and background colour – for instance, changing black text on a white background to white text on a black background with different distinct colours for links and other elements.

This not only makes text more readable for many but the switch to a ‘dark theme’ also reduces brightness, which can reduce stress on the eye.

Checking your colour contrast

The WebAIM contrast checker is a web page where you can input two colours that you are planning to use and it will tell you the contrast ratio.

Most automated testing tools such as Microsoft Accessibility Insights check for contrast issues. These can be useful for quick checks on a page, but do not only rely on automated tools – you should manually check contrast ratios as well.