Free tool · no sign-up
Which of your brand colours can sit on which?
Short answer
Paste up to 10 brand colours and the checker grades every text-on-background pair against WCAG: 4.5:1 for body text, 3:1 for large text and icons, 7:1 for AAA. For each failing pair it suggests the closest darker or lighter shade of your colour that passes.
A free alternative to checking colour pairs one at a time. Classic checkers such as WebAIM's test one foreground and one background; this tests your whole palette at once.
theepa.studio/tools/brand-colour-contrast-checker/Brand colour contrast checker report
Generated · Theepa Studio · Brand identity and web design studio, Dubai
Runs in your browser. No sign-up.
Your brand colours (hex)
10 of 20
colour pairs pass WCAG AA for body text.
Aa Brand text
The quick brown fox jumps over the lazy dog.
#FFFFFF on #231F2016.30:1AAAA largeAAAAa Brand text
The quick brown fox jumps over the lazy dog.
#231F20 on #FFFFFF16.30:1AAAA largeAAAAa Brand text
The quick brown fox jumps over the lazy dog.
#231F20 on #F4F5FF15.02:1AAAA largeAAAAa Brand text
The quick brown fox jumps over the lazy dog.
#F4F5FF on #231F2015.02:1AAAA largeAAAAa Brand text
The quick brown fox jumps over the lazy dog.
#FFFFFF on #4655D45.98:1AAAA largeAAAAa Brand text
The quick brown fox jumps over the lazy dog.
#4655D4 on #FFFFFF5.98:1AAAA largeAAAAa Brand text
The quick brown fox jumps over the lazy dog.
#4655D4 on #F4F5FF5.51:1AAAA largeAAAAa Brand text
The quick brown fox jumps over the lazy dog.
#F4F5FF on #4655D45.51:1AAAA largeAAAAa Brand text
The quick brown fox jumps over the lazy dog.
#231F20 on #7384FF5.02:1AAAA largeAAAAa Brand text
The quick brown fox jumps over the lazy dog.
#7384FF on #231F205.02:1AAAA largeAAAAa Brand text
The quick brown fox jumps over the lazy dog.
#FFFFFF on #7384FF3.24:1AAAA largeAAAClosest passing text colour: (4.79:1)
Aa Brand text
The quick brown fox jumps over the lazy dog.
#7384FF on #FFFFFF3.24:1AAAA largeAAAClosest passing text colour: (4.62:1)
Aa Brand text
The quick brown fox jumps over the lazy dog.
#7384FF on #F4F5FF2.99:1AAAA largeAAAClosest passing text colour: (4.61:1)
Aa Brand text
The quick brown fox jumps over the lazy dog.
#F4F5FF on #7384FF2.99:1AAAA largeAAAClosest passing text colour: (4.60:1)
Aa Brand text
The quick brown fox jumps over the lazy dog.
#231F20 on #4655D42.72:1AAAA largeAAAClosest passing text colour: (4.53:1)
Aa Brand text
The quick brown fox jumps over the lazy dog.
#4655D4 on #231F202.72:1AAAA largeAAAClosest passing text colour: (4.64:1)
Aa Brand text
The quick brown fox jumps over the lazy dog.
#7384FF on #4655D41.84:1AAAA largeAAAClosest passing text colour: (4.56:1)
Aa Brand text
The quick brown fox jumps over the lazy dog.
#4655D4 on #7384FF1.84:1AAAA largeAAAClosest passing text colour: (4.59:1)
Aa Brand text
The quick brown fox jumps over the lazy dog.
#FFFFFF on #F4F5FF1.09:1AAAA largeAAAClosest passing text colour: (4.56:1)
Aa Brand text
The quick brown fox jumps over the lazy dog.
#F4F5FF on #FFFFFF1.09:1AAAA largeAAAClosest passing text colour: (4.54:1)
Opens your print window. Choose “Save as PDF” as the destination.
Want help acting on this?
Book a free call: theepa.studio/intro · info@theepa.studio
This report was made with Brand colour contrast checker, a free tool by Theepa Studio. Results come from the inputs on the page when it was saved.
How it works.
The method behind the numbers, so you can judge the result.
- Contrast ratio uses the WCAG 2.x relative luminance formula: (lighter + 0.05) / (darker + 0.05).
- AA requires 4.5:1 for normal text and 3:1 for large text (about 24px, or 19px bold) and UI graphics. AAA requires 7:1 and 4.5:1.
- Suggestions keep your colour's hue and step it darker (on light backgrounds) or lighter (on dark backgrounds) until it passes.
Sources
Brand colour contrast checker: questions
What contrast ratio do I need for text?
WCAG AA needs at least 4.5:1 for normal body text and 3:1 for large text and icons. AAA needs 7:1 for body text.
Can light brand colours like periwinkle be used for text?
Usually not on white. Our own periwinkle #7384FF is about 3.2:1 on white, so we use a deeper iris (#4655D4) for text and keep periwinkle for backgrounds and graphics.
Does contrast affect SEO?
Not directly, but accessibility is part of a good page experience, and in many markets accessible websites are a legal expectation.
Want it done for you?
Brand identity: Strategy, logo system and guidelines your team can actually use.
Tell us what you're building.
A 30-minute call. We look at your brand and site together, and you leave with a plan and a fixed price, whether or not you hire us.