- Free, no sign-up
- Nothing leaves your browser
- WCAG 2.2 · APCA draft
Check your brand colours before they go out.
Paste your brand colours to see which pairs can carry text, which look alike to colour-blind people, and the smallest fix for each pair that fails.
Your colours
6 colours · up to 8- text and background pairs pass for body text (4.5:1)
- 10/30
- more pairs work for large text only (3:1)
- 10
- pairs look alike to colour-blind people
- 0
Every text and background pair
WCAG 2.2 is the current W3C standard and the one most accessibility audits test against. AA needs 4.5:1 for body text and 3:1 for large text and interface elements, and AAA needs 7:1.
Text#171717on…
Text#FFFFFFon…
Text#007F3Con…
Text#C5DAFFon…
Text#FFDEC7on…
Text#5B7FD8on…
Through other eyes
About 1 in 12 men and 1 in 200 women have some form of colour-blindness. This flags pairs that look alike to them, so they shouldn’t be the only way you tell two things apart.
Deuteranopiamost common
All colours stay distinguishable.
Protanopiared-blind
All colours stay distinguishable.
Tritanopiarare
All colours stay distinguishable.
Monochromacyvery rare
Look alike: #007F3C and #5B7FD8, #C5DAFF and #FFDEC7. Add a label, icon or pattern too.
Nearest fixes
The smallest shift in lightness that brings a failing pair up to 4.5:1 for body text, keeping the hue.
Export
:root {
--brand-1: #171717;
--brand-2: #ffffff;
--brand-3: #007f3c;
--brand-4: #c5daff;
--brand-5: #ffdec7;
--brand-6: #5b7fd8;
}
/* Text pairs at 4.5:1 or better:
--brand-1 on --brand-2 (17.9:1)
--brand-1 on --brand-4 (12.7:1)
--brand-1 on --brand-5 (14.1:1)
--brand-1 on --brand-6 (4.7:1)
--brand-2 on --brand-1 (17.9:1)
--brand-2 on --brand-3 (5.1:1)
--brand-3 on --brand-2 (5.1:1)
--brand-4 on --brand-1 (12.7:1)
…and 2 more */Quick reference
Contrast levels in WCAG 2.2.
AA is the level most sites and audits aim for. APCA, the WCAG 3 draft, suggests Lc 75 for body text, 60 for other text and 45 for headlines.
| Use | AA | AAA |
|---|---|---|
| Body textUnder 24px, or under 19px bold | 4.5:1 | 7:1 |
| Large text24px and up, or 19px bold and up | 3:1 | 4.5:1 |
| Icons, borders and focus ringsAnything someone needs to see to use the page | 3:1 | 3:1 |
| Logos and decorationNot required, but keep your logo legible | None | None |
Questions
Good to know.
What contrast ratio does text need?
Under WCAG 2.2 AA, body text needs 4.5:1. Large text (24px, or 19px bold) and icons, borders and focus rings need 3:1. AAA raises body text to 7:1.
What is APCA?
The Accessible Perceptual Contrast Algorithm, the proposed method for WCAG 3. It judges dark backgrounds and thin type more accurately than WCAG 2.2, but it’s still a draft, so use WCAG 2.2 for compliance.
How do I fix a colour pair that fails?
Use Nearest fixes. It changes only the lightness of one colour, keeping the hue, until the pair reaches 4.5:1. Choose Use it and every score updates.
Which types of colour-blindness does it simulate?
Deuteranopia, protanopia, tritanopia and monochromacy. About 1 in 12 men and 1 in 200 women have some form of colour-blindness, mostly red–green.
Can I save or share my palette?
Your last palette is remembered in this browser. Copy share link puts the colours in the web address, so anyone you send it to sees the same results.
How we keep these current
We review every platform size every quarter, when we update our own templates. If you spot something out of date, email info@onmark.com.au and we’ll fix it that week.
Rather have it done properly?
We build brand systems and social templates that pass these checks from the start.