Why does colour contrast matter?
More than two million people in the UK live with a visual impairment. Many more report having difficulties with their sight. 4.5% of the the British population is colour blind.
When we use colours, the contrast between two colours needs to be enough so that people can tell the difference. For example, for some white text on a yellow background can be very hard to read.
The above article gives a good overview about colour contrast.
Useful Links
- PowerToys for Windows 10 has a fantastic colour picker tool, this helps you identify colour codes.
- How pick colour codes on a Mac.
- Who can use? – This is my favourite colour contrast checker.
- Convert RGB colours to Hex / HTML for use in colour contrast checkers
- Convert HTML (HEX) to RGB – Office products cannot use HTML colour codes, so this site can be used to change them if you need to.
- “Colorsafe” – Accessible colour generator – If you want a colour to go with another, this site can help you to find an accessible colour.
- “tanaguru contrast finder”: Find good constrasts, for web accessibility, between two colours you specify.
- ColorBox can help you to design a new accessible colour palette. This explanatory blog post is useful to read first.
- Find the Perfect Contrast Between Light Text and a Background Image.
- Guest blog: How to check your brand’s colour contrast for accessibility – a post I wrote for the AbilityNet website.
- More resources, posts, and presentations.
Microsoft Office “Standard Colours” – colour contrast accessibility matrix
This matrix lists the standard colours available in the colour palette in Office products like Word, PowerPoint and Excel. It can be used to look up which colours are accessible when used together.
University of Southampton brand – colour contrast accessibility matrix (interactive web-based version)
This matrix lists all the colours in the University of Southampton brand and can be used to look up which colours are accessible when used together. This is the interactive web version suitable for use on computers and mobile devices.
University of Southampton brand – colour contrast accessibility matrix (PDF version)
This matrix lists all the colours in the University of Southampton brand and can be used to look up which colours are accessible when used together.
University of Southampton brand – colour contrast examples
These web pages demonstrate all the accessible colour choices that can be used for: