Pick a foreground and background hex. We compute relative luminance contrast (WCAG 2.x) and show AA/AAA for normal and large text. Runs entirely in this browser.
The quick brown fox — sample text at 16px and 24px large
Contrast ratio: —
Tips for readable palettes
Aim for 4.5:1 or better for body text (AA). Large text (18pt+/14pt bold) can use 3:1.
Neon accents on dark studio backgrounds often pass for large labels but fail for small body copy — check both.
After you lock swatches in the studio, paste HEX pairs here before shipping UI.
Pair with the CSS gradient generator when text sits on a gradient: test against the lightest and darkest stops.
FAQ
What contrast ratio do I need?
WCAG AA needs 4.5:1 for normal text and 3:1 for large text. AAA is 7:1 and 4.5:1 respectively.
Is this a full accessibility audit?
No. It checks contrast between two solid colors only — not focus rings, non-text UI, or dynamic themes.
Can I use studio palette colors here?
Yes. Copy HEX from a swatch on the studio page, paste it into foreground or background, then Check contrast.