How to make web pages accessible

Foreground colour must be clear against background colour so people can understand your content easily. The Who Can Use tool (opens new window) (opens in a new window) shows you how colour contrast can affect different people with visual impairments.

If it's hard to understand content because of the colours, it's likely not meeting colour contrast ratio requirements. Colour contrast ratio means how dark and light colours must be on a screen.

What to check

Two things to check with colour contrast are:

• Does text meet colour contrast ratio against the background colour? Normal text (anything under 18 point/24px) must have a colour contrast ratio of 4.5:1. Larger text is defined as 18 point/24px and above or 14 point/18.66px and above for bold text. Larger text must have a colour contrast ratio of 3:1.
• Do non-text elements have the right colour contrast against colours around them? Non-text elements must have a colour contrast ratio of 3:1. Examples include buttons, graphics, graphs or charts that are essential to using/understanding your content. For example, if you had a search button graphic that was crucial to someone being able to search your website, it would need to meet colour contrast ratio.

Logos are exempt from colour contrast ratio requirements.

Why web pages need sufficient colour contrast

There are approximately three million colour blind people in Britain (Source - Colour Blind Awareness).

But poor colour contrast doesn't only affect those with vision problems. Factors like tiredness, screen differences, age, and daylight can all affect how we see colour.

Higher contrast between colours means more people can read and navigate your web page.

Also, if colour is the only way to convey meaning, users who cannot see colour will miss out.

Go to YouTube to watch a video on the importance of colour contrast.

How to check colour contrast on a web page

Web AIM explains how to check colour contrast with Dev Tools. This includes checking hover and focus states.

Another quick way to check elements of a page is by using Dev Tools in Google Chrome or Microsoft Edge. This works for most web page elements.

In either browser, open Dev Tools by right-clicking and choosing 'Inspect' at the bottom of the menu. Or you can just use the key combination ctrl + shift + I.

Then navigate to the select element button - this is the arrow icon in the top left of the Dev Tools window (screenshot below).

Moving your mouse over individual elements should show various CSS and accessibility values for the element.

For most elements, the browser will then show you the contrast ratio between the element and its background. It will appear in a little pop-up (screenshot below). If it passes, there should be a green tick next to the contrast ratio.

Checking colour-only links

Some links only show colour and are not underlined. Use this contrast checker from Web AIM to evaluate colour-only links (opens new window) (opens in a new window).

WAVE extension tool

The WAVE extension tool (opens new window) (opens in a new window) can review your web page to check colour contrast is sufficient. Web AIM explains more about how to use WAVE.

Read more

• Minimum colour contrast ratio for text (Web Content Accessibility Guidelines (WCAG) website)
• Minimum colour contrast ratio for non-text elements (WCAG website)