How to make web pages accessible

Colour contrast

Good colour contrast helps more people, including those using assistive technologies, read and understand web pages

Colour on web pages

Text and images on web pages must have enough contrast to be clearly visible for most people. This includes:

normal and large text
non-text content like charts, images of text, buttons and other interactive components

Decorative images and logos do not need to meet colour contrast requirements.

Do not rely on colour alone to convey information. Always include text labels, patterns or other visual cues in charts, graphs or interactive components.

Colour contrast ratios

Colour contrast ratio measures the difference in brightness between two colours. Higher ratios mean higher contrast.

Normal and large text

Minimum contrast ratios:

4.5:1 for normal text (under 18 point (24px) or 14 point (18.5px) bolded)
3:1 for large text (above 18 point (24px) or 14 point (18.5px) bolded)

The most inclusive and easiest to read colour combinations use 7:1 for normal text and 4.5:1 for large text.

Setting text colour

Most websites have pre-set text colours. If you can change text colour:

avoid very low or very high contrast colour combinations
do not use colour alone to show meaning, for example, red text to show importance
check that text over multi-colour backgrounds, such as photos or semi-transparent graphics, is still readable

Non-text content

Non-text content must meet a minimum contrast ratio of 3:1.

This includes:

complex images like charts, graphs and diagrams
images of text
graphical objects
interactive components, like buttons, form fields, image links

Ensure good contrast between:

text and its background
lines and background colours
adjacent lines shapes, such as in charts or graphs

Learn more about using images in web content

Check colour contrast

Use free online tools to check contrast on web pages.

WebAIM Contrast Checker

WebAIM's Contrast Checker is web-based tool that works for most content. Use the colour picker dropper or input colours by their hex or RGB values.

Colours must meet minimum WCAG AA ratios to be accessible.

Check colours using WebAIM's Contrast Checker

Silktide Accessibility Checker

Silktide's free browser extension has a contrast checker and colour vision simulator. The simulator helps you see how different people experience your colours.

Download Silktide's free accessibility checker extension (Chrome Web Store)

Other colour tools and resources

You can use a colour's hex code (like #FFFFFF) with the following online tools:

Venngage Accessible Color Palette Generator - find colour pallets that are WCAG compliant.
WhoCanUse website - better understand how different colours combinations affect different people.