Color Contrast Checker Online Free
WCAG Contrast Checker - 2AA/AAA contrast between text and background. Pastes hex, shows live preview, APCA Lc hint, free, client-side.
Pick or paste two hex colours and see the WCAG 2 contrast ratio, all four AA/AAA badges, and the APCA Lc hint for WCAG 3.
Live preview
Ratio
How to Use Color Contrast Checker Online Free
- Pick or paste hex colours: the picker and text field for each colour are kept in sync, so you can drag the picker or paste
#1e293bor even the shorthand#123. - Edit the sample text to match the copy you're auditing - the preview updates in real time on both 16 px (normal) and 24 px (large) sizes.
- Read the ratio - WCAG 2 calls for 4.5:1 for normal body text at AA, and 7:1 at AAA. 21:1 is the maximum (black on white).
- Scan the four badges - AA normal, AA large, AAA normal, AAA large. Green means pass, amber means fail. Aim for all four green for the best experience.
- Glance at the APCA Lc hint under the ratio - it's the new WCAG 3 metric, much more perceptually uniform, and useful for fonts/sizes that WCAG 2 over- or under-estimates.
- Press
Swap ⇆to flip foreground and background - handy when checking a dark-mode variant of a palette. - Copy the report or Download a timestamped `.txt` summarising the ratio, Lc, RGB values, and all four badge verdicts.
Frequently asked questions
Is my data secure when checking colour contrast?
Yes. All contrast maths runs in your browser via a few JavaScript calls – no server request, no upload, no analytics on colour input. The page works entirely offline once loaded.
Is this contrast checker free?
Yes, 100% free. No sign-up, no rate limit, no premium tier.
What is WCAG and why does it matter?
Web Content Accessibility Guidelines are the international standard for web accessibility. WCAG 2.1 AA is the legal requirement in many jurisdictions (US Section 508, EU EN 301 549); AAA is a stricter target for maximum readability. WCAG 3 (draft) introduces APCA Lc as a perceptual replacement.
What contrast ratio do I need to pass?
AA: 4.5:1 for normal text, 3:1 for large text. AAA: 7:1 for normal text, 4.5:1 for large text. The four badges in the Ratio card show all four thresholds at a glance.
What counts as large text?
18 pt (≈ 24 px) or larger for regular weight, or 14 pt (≈ 18.5 px) for bold. The tool’s “Large” preview cell is 24 px so you can eyeball whether the relaxed AA/AAA thresholds apply.
Can I type hex codes instead of using the picker?
Yes – each colour has both a native colour picker and a text field for pasting or typing. Shorthand hex like #f00 and values without the leading # are accepted. Invalid hex shows an inline error and keeps the last valid result.
What’s APCA Lc?
The Accessible Perceptual Contrast Algorithm’s “Lightness contrast” value – a signed score in roughly ±108. The WCAG 3 draft uses it because human perception of contrast depends on both colour polarity and font weight in ways the simple WCAG 2 ratio cannot capture.
Why does my design fail WCAG?
Most common culprits: light grey body text (#aaa) on white, coloured accent text on coloured backgrounds, and icon/text combos that rely on hue alone. Darken the foreground, lighten the background, or add a text label alongside the colour signal.
Is passing AA enough?
It’s the legally required baseline in most jurisdictions and works for most readers. AAA materially helps users with low vision and is worth chasing on critical copy (forms, error messages, CTAs). WCAG 3 (APCA) will raise the bar further once it ships.
How accurate is this contrast checker?
The WCAG 2 ratio uses the official relative-luminance formula (sRGB gamma-aware) and produces identical output to browser dev-tools and professional auditing suites. The APCA Lc uses the SA98G coefficients from the public reference implementation.