Choosing the right colours and contrasts

May 20, 2020 | Articles

Digital inclusion means understanding the relationship between the way people function in society and making sure everybody gets the same opportunity to participate.

The WCAG guidelines are designed to make sure everyone can take part in ordinary everyday life. WCAG covers a lot of different areas, some of which may seem obscure if you have never had trouble accessing information yourself.

Not just for people with low-vision

Low-contrast text can make reading difficult for everyone, not just people with low-vision. For example, if you have ever tried to read a text on your mobile device in sunlight, you have probably felt the need for text with a strong contrast.

One of the areas, that can cause trouble, is colour contrasts and nuances. Mixing different colours of text and backgrounds, may seem readable enough to you – but for some it can make it nearly impossible to get the information they are looking for. Design is important, but what good is a beautiful design, if it excludes a large group of people.

Seeing through another’s eyes

Ensuring your colour choices are accessible for everyone, can be troublesome since you can only see the text with your own eyes and not with others’. However, this challenge is easily remedied with a contrast checker. There is an array of excellent websites and tools to help you correctly choose colours that live up to the WCAG guidelines.

These are the tools you are looking for

ColourContrast supplies a brilliant tool, for both visualising the text colour against the background and providing you with contrast ratios and hex-codes. You can copy and paste hex-codes or drag colour variable selectors to see the entire webpage change in real time. All the while it shows whether the colour combinations pass or fail the various levels of WCAG guidelines.

If you want a simpler way to choose your colours than dragging variables around or plotting in hex-codes. In that case, Webaim.org can be of great use. This contrast checker has a simple point and click system for choosing colours. This is very simple and still provides you with hex-codes for easy copy-pasting to your websites and documents. Both tools provide you with a contrast ratio. Contrast ratio is a scoring system for the readability of the text against the background.

Hopefully these tools have made it perfectly simple for you to pick colours and ensure that everyone is included. It only takes a moment to become more accessible and make sure no one gets left out.

Our newsletter

14-day trial period of AccessibilityFixer

Sign up below and get immediate access to a non-binding 14-day trial of AccessibilityFixer