Why Colour Contrast is Important for Digital Accessibility

What is Colour Contrast?

​ Colour contrast is the difference in brightness between a colour and its background. A contrast ratio expresses that difference as a number. Black against white has a ratio of 21:1, while identical colours have a ratio of 1:1. ​ For text, it’s necessary to compare the text colour with the background behind them. For controls and graphics, consider the visual information people need to identify them. A colour that works for a large heading may not work for smaller body text.

Who Benefits from Sufficient Colour Contrast?

​ People with low vision are normally the ones who get directly affected by insufficient colour contrast. Text or controls that looks clear to one person may be faint or indistinguishable to somebody with reduced vision or contrast sensitivity. ​ People with colour vision deficiency may also find particular colour combinations difficult to distinguish. This is especially important when a design relies on differences between colours to communicate meaning. ​ For example, when green is used to show something positive, and red to something negative, users with low vision may find it difficult to understand what you’re communicating, especially if colour is the only way your format chosen to present this message. ​ Contrast sensitivity can also change as people age. A colour combination that appears clear to a younger designer may be considerably harder for an older user to see. ​ The benefits are not limited to people with permanent disabilities. Content with good colour contrast can help users: ​

• Using a phone in bright sunlight
• Viewing a screen with glare or reduced brightness
• Using an older or lower-quality display
• Experiencing eye strain or fatigue
• Recovering from an eye injury or medical procedure
• Working in an environment where a screen is difficult to see ​ Good colour contrast makes designs more accessible and easier to use in different situations.

Why Colour Contrast Matters to Digital Accessibility

​ Because people see content in different ways, colour contrast can change the user experience. ​ A person with low vision or reduced contrast sensitivity, for example, may struggle to read text that appears clear to someone else.   ​ Better contrast can also help when a screen is affected by glare or bright sunlight. Readable instructions and recognisable controls make it easier for people to understand information and complete tasks. ​ Differences in colour vision can create another consideration: people may not distinguish the colours used to signal success, errors or chart categories. Sufficient contrast helps, but information should also use other ways to communicate meaning, such as words, symbols or patterns.

WCAG Guidance and Practical Examples

​

What are the WCAG colour contrast requirements?

​ WCAG sets different text contrast thresholds for Levels AA and AAA. However, it’s important to know that these requirements apply in both WCAG 2.1 and WCAG 2.2. ​

Common Problems and Testing

​

Review your colours choices against the following criteria

​ Faint text: Light grey text, prices and instructions can disappear against a pale background. Check smaller and supporting text as carefully as headings. ​ Text over images or gradients: The background can change behind the text, making some areas harder to read. A sampled pair may pass while another area fails. Check the area with the lowest contrast, not just one part of the image. You may also want to add a solid background behind text. ​ Unclear controls and states: Faint input borders, selected tabs and focus indicators can make actions hard to identify. Review each meaningful state, including hover, focus and error states. ​ Colour used alone: A red border is not a complete error message. Add text that explains the problem. Use labels, patterns or symbols alongside colour in charts and dashboards. ​ Placeholder text replacing labels: A placeholder that disappears during typing may be difficult to read. Use a visible form label that stays in place and is properly linked to the field. ​

How to test colour contrast

​

1. Identify the element: Decide whether you are checking text, a control or a meaningful graphic. Note the relevant background and text size. ​
2. Measure the colours: Use the free Colour Contrast Checker for a selected colour pair,or inspect an individual page element with the free browser extension. ​
3. Compare the right threshold: Review the ratio against the requirement for the element and text size. Do not treat one passing pair as a page-wide result. ​

Choose the Right Tool to Check Colour Contrast

​

Start with the free check that fits your task

​ You may be choosing colours before a page exists, examining a particular element or looking for broader issues on your homepage. Each task needs a different starting point. ​

• Free Colour Contrast Checker: Choose a text and background colour and compare their contrast ratio against WCAG requirements. Use it when building a palette or checking a specific colour combination. ​ Try the Free Colour Contrast Checker

• Free Contrast Checker Browser Extension: Inspect individual page elements while reviewing an existing page. Use it to support a focused review of the elements you select.

Explore the Free Contrast Checker Browser Extension

• Free Website Accessibility Checker: Scan your homepage for automatically detectable accessibility issues, including contrast issues that the scan can identify. Use the findings to decide where a wider review should begin. A homepage scan does not analyse your entire website. ​ Scan Your Homepage for Free

How to Improve Contrast while Keeping your Brand

​ A great way to start is prioritising the combinations where people need to read and act:   ​

• body text ​

• links

• button labels

• forms   ​ If the contrast is too low for any of the colours, try a darker text or lighter background. For light text on a dark background, try the opposite. You can often keep the character of your palette while improving its functional shades. ​ It’s important that you keep record of approved combinations in your design system, including the text sizes and states they support.   ​ Use decorative brand colours where appropriate, but don’t rely on colour alone to show important information. Fixing a shared component can also help keep many pages consistent. ​

Keep contrast in your publishing routine

​ New images, campaign colours and component changes can create new contrast issues even after an initial review. That’s why you should include contrast checks in design approval and publishing, then use monitoring to catch changes later. Make sure someone reviews the findings and check that the fixes work. ​ Inclusion develops through these everyday decisions. Clearer text, recognisable controls and understandable feedback help more people use the experience your team has created.