---
title: "Free brand colour contrast checker"
url: "https://www.onmark.com.au/tools/brand-colour-check"
description: "Free brand colour contrast checker: WCAG 2.2 and APCA for every pair, colour-blindness preview, nearest passing fixes, CSS and Tailwind export."
site: "Onmark"
---

**About this tool:**

- 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 ↓ · Background → #171717 #FFFFFF #007F3C #C5DAFF #FFDEC7 #5B7FD8

#171717

**17.93:1** AAA

**3.50:1** Large text

**12.67:1** AAA

**14.11:1** AAA

**4.67:1** AA

#FFFFFF

**17.93:1** AAA

**5.12:1** AA

**1.41:1** Fail

**1.27:1** Fail

**3.84:1** Large text

#007F3C

**3.50:1** Large text

**5.12:1** AA

**3.62:1** Large text

**4.03:1** Large text

**1.33:1** Fail

#C5DAFF

**12.67:1** AAA

**1.41:1** Fail

**3.62:1** Large text

**1.11:1** Fail

**2.71:1** Fail

#FFDEC7

**14.11:1** AAA

**1.27:1** Fail

**4.03:1** Large text

**1.11:1** Fail

**3.02:1** Large text

#5B7FD8

**4.67:1** AA

**3.84:1** Large text

**1.33:1** Fail

**2.71:1** Fail

**3.02:1** Large text

Text **#171717** on…

Text **#FFFFFF** on…

Text **#007F3C** on…

Text **#C5DAFF** on…

Text **#FFDEC7** on…

Text **#5B7FD8** on…

## 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.

**Deuteranopia** most common

All colours stay distinguishable.

**Protanopia** red-blind

All colours stay distinguishable.

**Tritanopia** rare

All colours stay distinguishable.

**Monochromacy** very 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.

Use #007633 instead of #007F3C with #FFDEC7 for 4.5:1.

Use #5073CB instead of #5B7FD8 with #FFFFFF for 4.5:1.

Use #006D2B instead of #007F3C with #C5DAFF for 4.5:1.

Use #2A9450 instead of #007F3C with #171717 for 4.5:1.

Use #3F61B7 instead of #5B7FD8 with #FFDEC7 for 4.5:1.

Use #3858AD instead of #5B7FD8 with #C5DAFF for 4.5:1.

## 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 */
```

## 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 |

## 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](mailto: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.

[Start a project](https://www.onmark.com.au/contact)