Create a web-accessible colour palette
Creating a web-accessible colour palette is essential in designing an inclusive and user-friendly website. It ensures your content is readable and engaging for all users, including those with visual impairments such as colour blindness. An accessible colour palette not only enhances user experience but also complies with web accessibility standards, such as the Web Content Accessibility Guidelines (WCAG).
The Australian Human Rights Commission states that all public-facing websites must conform to WCAG 2.0 Level AA.
Compliance with WCAG is often enforced through the Disability Discrimination Act 1992 (DDA), which mandates that services provided by businesses and organisations, including digital services like websites, must be accessible to people with disabilities. Not adhering to these guidelines can potentially lead to breaches of the DDA.
In this post, we’ll explain how to create a colour palette that is both aesthetically pleasing and accessible.
Colour Accessibility 101
Before creating a colour palette, it’s crucial to understand some basic principles of colour accessibility. The most important aspects to consider are:
Colour contrast
Colour contrast refers to the difference in light between the text (or foreground) and its background, ensuring that text and important graphical information stand out distinctly against the background. WCAG recommends a contrast ratio of at least 4.5:1 for normal text and 3:1 for large text.
There are quite a few free online tools to calculate the contrast ratio of two colours. This is the Colour Contrast Checker tool that I like to use.
Colour dependence
Your website should not rely solely on colour to convey information. This means that information conveyed with colour (like input field validation errors) should also be available without colour (like an error message text).
If your website uses graphics or charts where colour is important to convey information, it is prudent to use a Colour Blindness Simulator tool like Coblis to simulate how your colours appear to those with various types of colour blindness. This will help you ensure that your colour choices are discernible by everyone.
Steps to Create an Accessible Colour Palette
Step 1: Choose Base Colours
Start by choosing a few base colours representing your brand or desired aesthetic. These are typically 2-3 primary colours.
Step 2: Check for Contrast
Use a contrast checker to ensure that your primary colours provide sufficient contrast when used for text against light or dark backgrounds. Adjust the shades if necessary to meet the minimum contrast ratios.
Step 3: Expand Your Palette
Once your primary colours are set, create a broader palette by adding secondary colours. These can be used for accents, buttons, highlights, or less critical text. Again, use contrast-checking tools to ensure that these secondary colours also pass accessibility standards when used with other colours in your palette.
Step 4: Consider Colour Blindness
Using a colour blindness simulator, verify that all colours in your palette are distinguishable from one another by people with various types of colour blindness. This is crucial for elements of the UI that use colour to differentiate items (like graphs or alerts).
Step 5: Create Documentation
Document your colour palette choices, including HEX codes, RGB values, and usage guidelines. This ensures consistent use and helps other designers or team members adhere to accessibility guidelines.
The combinations in this colour palette style guide don’t all meet WCAG. See how we used the colours to ensure WCAG compatibility.
Conclusion
Use your colours consistently across the website to help users learn and remember your design's visual language.
In addition to legal requirements, adopting WCAG is considered the best practice in Australia for all websites to ensure they are inclusive and accessible to as wide an audience as possible. This approach not only enhances usability for individuals with disabilities but also improves the overall user experience for all users.
