As designers, we’re not just creators—we’re also advocates. Our job is to make sure that your website or app is accessible to everyone who uses it. While this doesn’t mean making things bland and boring (far from it!), it does mean understanding how color affects those with visual impairments or cognitive issues. So in this post, we’ll explore three free tools that will help create an accessible color palette.
Randoma11y
Randoma11y is a free web tool by Components AI for creating accessible color palettes. This tool does not require coding but instead uses a generator to create your palette. You can use Randoma11y to create color palettes for websites, apps, or illustrations.
What we like about this tool:
- Quickly generates ideas
- Demonstrates features like buttons, text, and icons
- Optional use of Components.ai Advanced Editor
Accessible Color Palette Combo Matrix
This tool is a prototype to help designers build accessible color palettes. To use the Accessible Color Combo Matrix, simply add colors to the palette builder.
The tool will then tell you whether or not your colors have sufficient contrast (or not). If you’d like to see what a good contrast ratio looks like, visit W3C’s website for some examples.
For example, black text on white background has a ratio of 4.5:1, which is considered sufficient for people with moderate vision impairments. This means that someone would have to adjust their screen brightness or turn up the brightness of their light source at least four times before they could no longer read the text as if it were black on white!
What we like about this tool:
- You can easily enter color combinations to see what works and what doesn’t with contrast
- This helps you quickly understand what color combinations will work well for those who depend on this feature (people with low contrast sensitivity and those who cannot distinguish between certain colors)
Accessible Color Generator
The Accessible Color Generator by Learn UI Design is a great tool for finding the closest variations of a certain color that contrast with another to meet levels of ADA compliance. If you already have a color palette set for your brand, for example, this tool can give you variations of the closest match to those colors while still keeping the palette compliant and accessible.
It’s important to ensure that your site is accessible to people with low vision. In addition to the Accessible Color Combo Matrix – this tool takes things one step further to help you ensure that your website meets the AA level of WCAG 2.0 guideline 4.4, which states that text must have a minimum of 4.5:1 contrast ratio against its background color (or image).
What we like about this tool:
- Super easy to use
- Get quick results on the fly
- You can choose either AA or AAA guidelines to generate the level of contrast that is best for your text and background color combination
Use accessibility tools to ensure your website is welcoming to all users.
Accessibility tools (such as tools to create accessible color palettes) are a great way to make sure your site is welcoming to people with disabilities. They’re also just useful for anyone who wants to keep their website’s colors accessible. You can use these tools on your own or enlist the help of someone who knows what they’re doing (like us!)
How accessible is your website? Try these three website accessibility tests.