In graphic design, colour plays an important role, not just in aesthetics but as a powerful tool for communication and to influence perceptions. When designing for accessibility, colour choices should ensure your designs are usable and enjoyable for everyone, including people with visual impairments.
Accessibility benefits your business because it shows compliance, helps you to improve your products and services and shows your brand to be inclusive and putting your customers first. Over the last year, we have started to see a lot more businesses request accessible downloads. This can be accessible pdfs or Word files, both are able to be designed to meet the WCAG accessibility guidelines.
Why is Colour Accessibility Important?
- Reaching a Wider Audience
By using accessible colour combinations, you ensure your designs are usable by people with colour vision deficiencies such as:- Red-Green Colour Blindness: The most common type, making it difficult to distinguish between shades of red and green.
- Blue-Yellow Colour Blindness: Less common, but affects the ability to distinguish between blue, yellow, and sometimes green.
- Total Colour Blindness: People with this condition see the world in shades of grey.
- Improved User Experience
Accessible colour choices enhance the overall user experience for everyone, regardless of their visual abilities. Strong colour contrast between text and the background colour improves readability and reduces eye-strain.
- Legal Considerations
In the UK, accessibility guidelines like WCAG (Web Content Accessibility Guidelines) mandate the use of sufficient colour contrast. They provide guidelines for two levels of compliance: AA and AAA. The AA level requires a contrast ratio of at least 4.5:1 for body text and 3:1 for large text like headers and titles. That means colour A must be 4.5 times darker (or lighter) than colour B for body text. To meet AAA guidelines, contrast must be 7.1 for body text and 4.5:1 or headers and titles. See below for some examples of high and low colour contrast alongside their contrast ratios.
Key Principles of Accessible Colour Use:
- Sufficient Colour Contrast
This is the cornerstone of accessible design. Ensure adequate contrast between text and background colours. We use this tool – WebAIM Colour Contrast Checker which can help you determine if your colour combinations meet accessibility standards. - Meaningful Colour
Don’t solely rely on colour to convey information. For example, don’t use colour alone to indicate a link. Provide alternative cues like underlining or bolding. Or on a line graph, use dotted and dashed lines rather than just different coloured lines. - Consider Colour Blindness
Test your designs with colour blindness simulators to see how they appear to people with different types of colour vision deficiencies.
Tips for Choosing Accessible Colours:
- Use a Limited Colour Palette
Stick to a few key colours and their variations to create a cohesive and accessible design. - Follow Brand Guidelines
Often brand guidelines have been created with accessible colours in mind and advise on text and background colours that shouldn’t be used together. - Prioritise High Contrast
Choose colours that have a significant difference in brightness and hue. - Use Colour Blindness Simulators
Regularly test your designs with these tools to identify and address potential issues. - Consult Accessibility Guidelines
Refer to guidelines like WCAG for specific technical requirements and best practices.
Which items should have Accessible Colour?
The WCAG guidelines exist to help people understand how to make web content more accessible. However, depending on what line of business you are in, it might be worth making sure the following items have accessible colour too:
- Mobile website and Apps
- Any website downloads that are in PDF or Word
- Videos
- Printed marketing materials such as flyers and brochures
- Social Media
Great tools:
- WebAIM Colour Contrast Checker
A free online tool for checking colour contrast – https://webaim.org/resources/contrastchecker/
- WCAG Guidelines
Provides comprehensive information on web accessibility standards, including colour contrast requirements – https://www.w3.org/WAI/standards-guidelines/wcag/
We can design accessible documents in Word or pdf that follow good design practice and are accessible in terms of colour, fonts, layouts, structure and with alternative text for images. By incorporating accessibility, your designs will be inclusive, user-friendly, and enjoyable for everyone.
Please get in touch at rosanne@silverstonedesignsolutions.com if you would like to discuss making your documents accessible.