How to make web pages accessible
Colour contrast
Use good colour contrast for text and non-text content so more people can understand your web page.
On this page
Colour on web pages
Text and images on web pages must have a good colour contrast ratio to be seen clearly by most people. This includes for:
- normal and large text
- non-text elements in informative images and interactive components
Contrast ratio is the difference in brightness between two colours.
Normal text should have a minimum ratio of 4.5:1, everything else 3:1.
The most inclusive and easiest to read colours have a minimum ratio of 7:1 for normal text, everything else 4.5:1.
Decorative images and logos do not need accessible colour contrast.
Do not use colour alone to show meaning. For example, you may need to add text labels or different patterns to bars in a chart, even if it has an accessible contrast ratio.
Learn more about colour contrast in How to write accessible content: Readability
Normal and large text
Normal and large text in on web pages require a minimum colour contrast ratio of:
- 4.5:1 for normal text - under 18 point (24px) or 14 point (8.5px) bolded
- 3.1 for large text - above 18 point (24px) or 14 point (18.5px) bolded
The most inclusive and easiest to read colours have a minimum ratio of 7:1 for normal text, 4.5:1 for large text.
On most websites, normal and large text colour are usually pre-set by the website's developer.
If you are web author that can change text colour on your web page, do not:
- use very high or very low contrast colours
- use colour alone to display information, like using red text to show something is important
This makes content less accessible to those who either cannot see colours or who find certain colours overwhelming.
Be sure you consider any text added over to multi-colour backgrounds, like photographs or semi-transparent graphics.
Non-text content
Colours for non-text content, like informative images, images of text, graphical objects or interactive components, must have a contrast ratio of at least 3:1.
An informative image could be a line chart where there must be good contrast between the:
- lines and background colours
- lines next to each other
An example of an Interactive components could be an image link, button or form field.
Decorative images do not need accessible colour contrast.
How to check and correct colour contrast
There are many free tools you can use to check colour contrast or colour combinations in your web content.
WebAIM Contrast Checker
WebAIM's Contrast Checker is web-based tool you can use that works across Word and PDF documents, on web pages and with images.
You can use the colour picker dropper tool or add different colours using either their hex colour code or red, green and blue (RGB) values.
The your colours must meet at minimum WCAG AA requirement using the checker to be accessible.
Go to WebAIM's Contrast Checker
You can use a colour's hex codes (like #FFFFFF) to help:
- find colour pallets that are WCAG compliant using the Venngage Accessible Color Palette Generator.
- better understand how different colours combinations affect different people on the WhoCanUse website.
Silktide Accessibility Checker
Silktide has a free accessibility checker with a built in contrast checker and colour vision impairment simulator. The simulator is a great way to understand how different people experience colours in your web page content.
Download Silktide's free accessibility checker extension (Chrome Web Store)
