How to make web pages accessible

Colour contrast

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).

Screenshot of select element tool in Dev Tools. We explain how to navigate to this in the text on this page.

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.