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 two to eight brand colours – via the colour picker or by pasting a list of hex values. The matrix calculates every combination of text and background colour live in your browser.
Rows are the text colour, columns the background – each cell shows the ratio and the WCAG level. Your palette is now in the address bar – copying the link is all it takes to share it.
Calculated with the WCAG relative-luminance formula (unchanged from WCAG 2.0 to 2.2), rounded down to one decimal place. Thresholds: 4.5:1 for normal text (AA), 7:1 for AAA, 3:1 for large text from 18 pt (or 14 pt bold) and for graphical objects and user-interface components. Contrast is one of many WCAG criteria: an all-green matrix does not yet make a website accessible.
One limit worth knowing: the matrix knows your colours, not your layout. Whether a pair appears on the page at all, how large the type is there and whether a photo sits behind the text are things it cannot see. The contrast ratio is a ratio, not a difference in brightness. It follows from the relative luminance of both colours using the formula (L1 + 0.05) / (L2 + 0.05), where L1 is the lighter colour. A value of 4.5:1 therefore does not mean that one colour is 4.5 times as bright as the other. The definition and the calculation are in the glossary entry on contrast ratio.
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 for graphical objects and user-interface 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 right in the browser for every combination of up to eight colours (thresholds: 4.5:1 normal text, 7:1 AAA, 3:1 large text plus graphical objects and user-interface components); the palette travels in the link's URL fragment and is therefore not sent to our server.
Frequently asked questions about the colour matrix
Which combinations do I need to check?
The matrix deliberately shows every combination – so you also see which pairs to avoid.
Source: W3C: WCAG 2.2, success criteria 1.4.3 and 1.4.11 (opens in a new tab)
Is AA enough for my colours?
AAA pays off where people read a lot. Individual decorative combinations below that are fine – as long as text is not affected.
Source: RIS: Austrian Accessibility Act, Section 5 (opens in a new tab)
Why does my audit tool differ slightly?
For borderline pairs (say exactly 4.5:1), allow some headroom – a little extra distance costs nothing.
Source: W3C: WCAG 2.2, definition of relative luminance (opens in a new tab)
One misconception is not about the arithmetic but about the goal: contrast and distinguishability are not the same thing. Two colours can reach the 4.5:1 threshold and still look almost identical to someone with red-green colour blindness. This is why WCAG success criterion 1.4.1 requires that colour is never the only means of conveying information. A red field and a green field of the same brightness are one field for some people. What that means for palettes is set out in the glossary entry on colour blindness and web design. And whether it affects your palette is what the colour vision simulator works out – it understands the same palette link as this page.