How to make web pages accessible

Colour contrast is the difference between two colours. Colours with good contrast stand out from each other. Colours with poor contrast look similar and can be difficult to tell apart. 

Factors like tiredness, screen displays, light levels, age and visual impairments can all affect how difficult it is to tell colours with poor contrast apart. 

Using good colour contrast means more people can understand and navigate your web page. 

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

What to check 

Colour contrast ratio measures the difference between two colours using numbers. You should use colour contrast ratio to check that colour combinations on certain parts of your web page have accessible contrast. 

The accessible contrast standards we must meet are detailed in the Web Content Accessibility Guidelines (AA standard). We summarise them on this page. 

Text 

Normal text is unbolded text under 18 point/24px and bolded text under 14 point/18.5px. Normal text colour and the colour behind it must have a colour contrast ratio of at least 4.5:1. 

Large text is unbolded text that is 18 point/24px and above and bolded text that is 14 point/18.5px and above. Large text colour and the colour behind it must have a colour contrast ratio of at least 3:1. 

Non-text content in interactive components 

Interactive components include things like links, buttons and form fields.  

Any non-text content, like icons, that users need to be able to see to identify the component must have good colour contrast. It must have a colour contrast ratio of at least 3:1 with the background colour. 

Non-text content in informative images 

Colours that are next to each other in informative images must have a colour contrast ratio of at least 3:1. 

For example, if you had a pie chart on your web page, you'd need to make sure that: 

• The pie chart's segment colours and the document's background colour have good colour contrast 
• The colours of segments next to each other have good colour contrast 

Our alt text page has advice on how to decide if an image is informative or decorative. 

Decorative images and logos do not have to have accessible colour contrast. 

How to check and correct colour contrast 

There are lots of different tools available to help you check colour contrast and find more accessible colour combinations. 

You should use the tools you feel most comfortable with. However, bear in mind that using browser developer tools (devtools) usually gives the most accurate results. 

• WebAIM explains how to check colour contrast with DevTools 
• WebAIM explains a range of other colour contrast checking tools 

Find out more 

• Who can use shows you how colour contrast can affect people with different visual impairments 
• Detailed guidance on minimum contrast ratio for text 
• Detailed guidance on minimum contrast ration for non-text content