Does my text have enough contrast? (WCAG)
Type a text color and background color - the tool computes the contrast ratio (1:1 to 21:1) and shows whether it passes AA / AAA for small text, large text, and UI components.
Plus a screen eyedropper (Chrome/Edge) - sample any element.
You see the pair live - small text, large text, sample buttons. Local - colors never leave the browser.
Critical for accessibility (a11y) - WCAG 2.1 AA is the minimum required by most regulations (Section 508, EU Web Accessibility Directive, UK Equality Act).
How to use it
- On the right: two fields, "Foreground" (text) and "Background". Each accepts HEX, RGB, native color picker, optionally a screen eyedropper.
- The center shows the pair live - small text (15px), large text (28px), full pangram sample, and two button styles.
- Bar below: ratio (e.g. "4.83:1") and four PASS/FAIL badges: AA-small (4.5:1), AAA-small (7:1), AA-large (3:1), AA-UI (3:1).
- When AA-small fails (the most common issue), an "Auto-fix" button appears - it darkens/lightens the text color in OKLCH (preserving hue) until the ratio reaches 4.5:1.
- "Swap" flips foreground ↔ background - useful when you're not sure which side to adjust.
When this is useful
Where the contrast checker shines - typical scenarios:
- Web design / a11y audits - AA-small 4.5:1 is the standard for body text, AA-large 3:1 for headlines, AA-UI 3:1 for button borders and icons.
- Brand colors - confirm your colors stay usable on different surfaces.
- Light / dark mode - test combos for both modes.
- Email templates - Outlook renders colors poorly. More contrast = readable text.
- Print - while WCAG targets screens, 4.5:1+ also works well on paper.
- Education - get an intuition for why "subtle" text (light gray on white) reads 1.5:1 - barely visible.
If you need to convert the failing color to a different format to compare values, use the color converter. For the broader a11y picture, simulate protanopia / deuteranopia / tritanopia in the color blindness simulator.