Tests every pair of your brand colors against WCAG 2.2 and shows the contrast ratio and the result for normal text, large text and interface parts. For designers and founders choosing which colors can sit on which.
How to use it
- Add your brand colors as hex codes, with a name if you like.
- Read the matrix: each cell shows the ratio and the best level that pair reaches, in words.
- Open the table below it to see every pair against every level.
- Copy the results, download the CSV or share the link with your team.
How Reavlo tests this
The calculation is the one in WCAG 2.2, done in your browser.
- Each color's relative luminance is
0.2126 R + 0.7152 G + 0.0722 B, where each channel is first converted from sRGB to linear light. - The contrast ratio is
(L1 + 0.05) / (L2 + 0.05), with L1 the lighter color. It runs from 1 to 21 and is the same whichever color is the text. - The ratio is cut to two decimals, never rounded up, so 4.499 doesn't pass as 4.5.
- The thresholds are: AA normal text 4.5, AA large text 3, AAA normal text 7, AAA large text 4.5, and 3 for interface parts and graphics (success criterion 1.4.11).
Limits. The tool tests solid colors only. It doesn't test text on images or gradients, transparent colors, or a color's look in dark mode. Large text means 24 px, or 18.66 px and bold, and up. Passing the contrast levels is one part of accessibility, not all of it.
Questions
What contrast ratio do I need?
WCAG 2.2 level AA asks for 4.5:1 for normal text and 3:1 for large text and for interface parts like input borders and icons. Level AAA asks for 7:1 and 4.5:1.
Does the order of the colors matter?
No. The ratio is the same whether a color is the text or the background.
Is my palette uploaded?
No. The matrix is built in your browser tab. A share link carries the colors in the part of the address after the #, which is never sent to a server.
Why does a pair show as failing at 4.49?
The ratio is cut, not rounded, because a value just under a threshold doesn't meet it.