Can people actually read that colour combination?
Pick a text colour and a background, and see the real ratio against all six WCAG thresholds at once, with a live preview at both text sizes. No upload, no email, and nothing leaves your device.
Large text, 24px and up
Normal text. The quick brown fox jumps over the lazy dog.
18.79:15 of 5 WCAG checks pass
- AA, normal textUnder 18pt (24px), or under 14pt (18.66px) bold, needs 4.5:1Passes
- AA, large text18pt (24px) and up, or 14pt (18.66px) bold and up, needs 3:1Passes
- AAA, normal textUnder 18pt (24px), or under 14pt (18.66px) bold, needs 7:1Passes
- AAA, large text18pt (24px) and up, or 14pt (18.66px) bold and up, needs 4.5:1Passes
- AA, UI components & graphicsIcons, borders and the parts of a control that carry meaning, needs 3:1Passes
Why it is six numbers, not one
A ratio that passes for a headline can fail for a paragraph
- Large text needs less contrast than body copy. WCAG sets a lower bar, 3:1 rather than 4.5:1, for anything 24px and up or bold at 18.66px and up. A pale tint that fails for a paragraph often passes for the headline sitting above it.
- AA is the bar most audits and most laws check for. AAA is the stricter, optional tier: worth reaching for body copy where you can, not a requirement everywhere.
- An icon or a border needs contrast too. The UI-components row is the one people forget: a focus ring, an icon that carries meaning, or a control’s own edge needs 3:1 against what sits behind it, the same as large text.
Next step
We build the palette around what actually reads.
Bring the colours you are torn between. We will tell you which pairing carries your brand and clears the bar, rather than one that only looks right on the monitor you designed it on.