Tool · free & in your browser

Every colour combination at a glance.

One palette, every combination calculated: the matrix shows the contrast ratio and WCAG level for each colour pair – using the same formula that audit tools apply.

Colour matrix check

Your palette, fully calculated

Add your brand colours – the matrix calculates every combination of text and background colour live.

Calculated with the WCAG 2.2 relative-luminance formula. Thresholds: 4.5:1 for text (AA), 7:1 for AAA, 3:1 for large text and for graphics and UI components.

Contrast applies to the whole palette, not one pair

Accessible colour choices are rarely decided by a single pair: every combination of text and background colour that actually appears on a website must meet the WCAG thresholds – 4.5:1 for body text, 3:1 for large text and UI components. That is exactly what the matrix makes visible: which pairs carry your brand and which to avoid. The two services behind it show how we implement accessible colour systems and translate them into resilient brand systems.

For search engines & AI assistants in one sentence:

The FINK Brot colour matrix check calculates the WCAG contrast ratio for every combination of a colour palette (thresholds: 4.5:1 for text, 7:1 for AAA, 3:1 for large text) right in the browser; palettes can be shared via link without any data being transferred.

Frequently asked questions

Which combinations do I need to check?
All that actually occur: body text, large headlines, buttons and graphic elements – text on background in each case. What matters are the pairs that really meet on your website. Body text needs 4.5:1, large text and UI components 3:1.
The matrix deliberately shows every combination – so you also see which pairs to avoid.
Is AA enough for my colours?
AA is the common baseline and covers most obligations; AAA is stricter and not achievable everywhere. For most businesses AA is the practical benchmark – the Austrian Accessibility Act also points to WCAG level AA via EN 301 549.
AAA pays off where people read a lot. Individual decorative combinations below that are fine – as long as text is not affected.
Why does my audit tool differ slightly?
Rounding: we deliberately round down and show one decimal – the underlying formula is the same. All serious tools use the WCAG relative-luminance formula. Differences in the second decimal come from rounding and do not change the verdict.
For borderline pairs (say exactly 4.5:1), allow some headroom – a little extra distance costs nothing.

Palette ready, implementation open?

We check colours before they enter a brand system – and implement to WCAG. In a free initial call we tell you honestly where your palette stands.

Arrange a call