Enter any two colors and get the exact contrast ratio, pass or fail for every WCAG level, and a live text preview. If it fails, Pandaxq shifts the lightness until it passes — same hue, no guessing, no redesign.
| Foreground | #16151A |
| Background | #FFFFFF |
| Relative luminance (fg / bg) | 0.000 / 1.000 |
Two designers can argue about whether a grey "looks readable" all afternoon. The ratio ends the argument in one number, running from 1:1 to 21:1.
AA requires 4.5:1 for normal text and 3:1 for large text. AAA raises normal text to 7:1. Icons, borders and input outlines need 3:1 because they carry meaning without words.
When a brand color fails, the hue is rarely the problem — the lightness is. Nudging L in HSL until the ratio clears 4.5 keeps the color recognizable and the marketing team calm.
Pure black on pure white is the maximum. Anything above roughly 12:1 is comfortable for long reading; above about 16:1 some readers find the edges of letters start to blur.
For AA — the level most laws and procurement checklists reference — 4.5:1 for normal text, 3:1 for large text, and 3:1 for interface components and meaningful graphics. AAA, which is rarely a legal requirement, asks for 7:1 and 4.5:1 respectively.
WCAG defines it as 18pt (24px) or larger, or 14pt (about 18.66px) or larger when bold. Anything under those thresholds is normal text and needs the full ratio — a 20px semi-bold heading does not qualify.
Keep the hue, move the lightness. A mid-tone blue that sits at 3.1:1 on white usually clears 4.5:1 once you darken it a few steps. Where the brand colour genuinely cannot move, use it for large text, borders or fills only, and pair it with a darker accessible variant for body copy.
The ratio has to hold against the worst part of the background behind the text — not the average. The usual fixes are a solid scrim, a blurred plate, or a text shadow strong enough to guarantee a floor. WCAG does not measure averages, so "it's mostly dark" does not count.
No. Contrast is one checkpoint. Colour-blind users need information that isn't carried by hue alone, keyboard users need visible focus, and motion-sensitive users need reduced-motion support. Passing 4.5:1 makes your text readable; it doesn't make your interface usable.
No. Every calculation runs in your browser. The colours you enter are only stored in the page URL so the link is shareable.
