Skip to content

Free accessibility tool

Brand Colour Contrast Checker

Check your brand colours against WCAG 2.2, and find the nearest accessible shade when a pair falls short.

Large heading text

Normal body text at regular size, the hardest case to pass.

Button outline

Result

2.99:1 contrast ratio

  • AA normal text (4.5:1)Fail
  • AAA normal text (7:1)Fail
  • AA large text (3:1)Fail
  • AAA large text (4.5:1)Fail
  • UI components & graphics (3:1)Fail

Nearest passing shades (same hue)

  • Text for AA: #8151FE (4.62:1)
  • Text for AAA: #581AFD (7.04:1)
  • Or background for AA: #2E2E2E (4.52:1)

Large text is 24px and up, or 18.7px and up in bold. Ratios are rounded down, as WCAG doesn't allow rounding up.

Palette matrix

Paste up to 8 brand colours to see every text-on-background pairing at once.

6 colours. Each cell shows text in the row colour on the column colour.

Contrast ratio and WCAG level for each text colour (rows) on each background colour (columns)
Text ↓ / Bg →#5430AF#A27FFE#EFF3F5#1A1A1A#000000#FFFFFF
#5430AFSame colour
2.89:1Fail
7.77:1AAA
2.00:1Fail
2.41:1Fail
8.68:1AAA
#A27FFE
2.89:1Fail
Same colour
2.68:1Fail
5.80:1AA
7.00:1AAA
2.99:1Fail
#EFF3F5
7.77:1AAA
2.68:1Fail
Same colour
15.58:1AAA
18.80:1AAA
1.11:1Fail
#1A1A1A
2.00:1Fail
5.80:1AA
15.58:1AAA
Same colour
1.20:1Fail
17.40:1AAA
#000000
2.41:1Fail
7.00:1AAA
18.80:1AAA
1.20:1Fail
Same colour
21.00:1AAA
#FFFFFF
8.68:1AAA
2.99:1Fail
1.11:1Fail
17.40:1AAA
21.00:1AAA
Same colour

AAA: 7:1 · AA: 4.5:1 · AA Large: 3:1 (large text and UI components only) · Fail: under 3:1.

What this tool checks

  • Contrast ratio for any foreground and background pair
  • WCAG 2.2 AA and AAA for normal and large text, and the 3:1 minimum for UI components and graphics
  • A palette matrix: paste up to 8 colours and see every combination
  • The nearest passing shade, keeping your hue and saturation

Good to know

Runs entirely in your browser. Contrast ratios apply to solid colours; text over images or gradients needs checking at its lowest-contrast point. Passing contrast is one part of accessibility, not all of it.

No email wall: run as many checks as you like. The server-based tools only read public pages, the same way a browser or search engine does.

Frequently asked questions

What contrast ratio do I need?

WCAG 2.2 level AA asks for at least 4.5:1 for normal text, 3:1 for large text (24px, or about 18.7px bold) and 3:1 for UI components such as input borders and icons. Level AAA asks for 7:1 for normal text and 4.5:1 for large text.

My brand colour fails. Do I need to rebrand?

Usually not. Keep the brand colour for large headings, backgrounds and graphics where it passes, and use a slightly darker or lighter shade of it for body text and buttons. The suggestions here keep the same hue so it still looks like your brand.

Is a ratio of 4.49:1 close enough?

No. WCAG thresholds are exact minimums and ratios are not rounded, so 4.49:1 fails AA for normal text. That's why this tool rounds displayed ratios down.

Does contrast apply to logos?

No. WCAG exempts logos and brand names from the contrast requirements, and decorative elements too. It does apply to text, icons that carry meaning, and the boundaries of form fields and buttons.