Accessible Brand Colors

A tool to make sure your brand colors are ADA compliant.

2.4K followers

This tool shows you how ADA compliant your colors are in relation to each other. By adding your brand’s colors on the right, you can generate a chart to see how they can be used together for accessibility, and find similar colors that work better.
Accessible Brand Colors gallery image
Accessible Brand Colors gallery image
Launch Team
Flowstep
Flowstep
Generate real UI in seconds
Promoted

What do you think? …

Aaron O'Leary
It's really good to see more people making design tools that make it easier to design for accessibility
LUCAS ZODE
Awesome tool, I'd suggest one thing, on the compliance level, I'd like to understand how the levels works, or a tooltip about what the numbers mean, I got like AAA (7+) AA (4.5+) AA18 (3+)... Honestly, I have no idea what is that.
Ryan Hoover
Simple, useful tool for designers. Also check out this app from Lyft.
Ruxandra Anghel
I'm confused what DNP is for
Levi Brooks
@ruxi_ang1 DNP, means DO NOT PASS, which means it doesn't pass the ADA laws with regards to contrast
Erica Heinz
Love it, so useful and thoughtfully done! It'd help me even more if 1) the top row had the text written in those colors so I understood the table on first glance 2) white was a default BG, so I didn't have to add it each time