WCAG Contrast Checker — Instant AA & AAA Verdicts
Accessible colour is non-negotiable: 4.5% of the world has some form of colour-vision deficiency and a far larger fraction has low vision at some point in life. PikDraw's WCAG contrast checker tells you in one glance whether a foreground/background pair clears WCAG 2.1 AA or AAA for normal text, large text and UI components — with a live preview at the exact font size you're about to ship.
What is the WCAG Contrast Checker?
The WCAG contrast checker is a browser-side accessibility utility that computes the WCAG 2.1 contrast ratio between any two sRGB colours and reports pass/fail against the four canonical thresholds (AA normal, AA large/UI, AAA normal, AAA large). It uses the W3C reference formula and shows a live preview pane so you can sanity-check legibility against your real font and size before committing to a design token.
Key features
- Live contrast ratio updates as you type or drag colour pickers
- Five pass/fail badges covering every WCAG 2.1 text and UI tier
- Live preview pane with paired slider + numeric font-size control
- WCAG 2.1 reference formula — predictable, audit-ready output
- Zero network calls — colours stay on your device
- Keyboard accessible and dark-mode aware
- Pairs with the colour converter and palette generator
- Free forever, no signup, no quotas
How it works
We parse each HEX colour into RGB, apply the WCAG 2.1 sRGB linearisation (gamma 2.4 with the 0.03928 cutoff), and weight the channels (0.2126R + 0.7152G + 0.0722B) to get relative luminance. The contrast ratio is (L_lighter + 0.05) / (L_darker + 0.05). Verdicts are derived by comparing that ratio to the four WCAG thresholds. Everything is synchronous and recomputes on every keystroke.
Why use this tool
Most contrast checkers throw you into modal-heavy editors or hide the verdict behind a paywall. PikDraw's keeps the checker on a single screen with a live preview at the exact font size you'll ship — no context switching, no signup, no tracking.
Common use cases
- Auditing brand colours before locking design tokens
- Verifying button + label pairs hit AA at the target font size
- Choosing accessible chart colours against light or dark themes
- Validating dark-mode contrast on hover/focus states
- Quick a11y checks during design review
How to use this tool
- Pick a foreground colour — Use the colour picker or paste a HEX value. The live preview tile reflects your choice immediately.
- Pick a background colour — Set the background the foreground will sit on. The contrast ratio recalculates on every change.
- Adjust the preview text size — Move the size slider (or type a value) to see how the same pair reads at body, lede or display sizes.
- Read the verdicts — Five badges show pass/fail against WCAG 2.1 AA and AAA for normal text, large text and UI components.
Who should use this
Designers, front-end developers, accessibility specialists, QA engineers, brand teams and content writers. Anyone whose work ends up on a screen.
How to get started
Pick a foreground and background colour, adjust the preview font size, and read the verdicts. There is nothing to install or configure.
Best practices
- Always test pairs in both light and dark themes.
- Use the AAA tier for legal text and primary CTAs whenever you can.
- Don't rely on colour alone — pair colour cues with icons or text.
- For non-text UI (icons, form borders) the AA threshold is 3:1.
- Recheck after any colour-token refactor.
Pro tips
- Aim for AA on every body-text pairing and AAA on legal text or critical CTAs.
- Large text (≥ 18pt regular or ≥ 14pt bold) gets a more lenient ratio — design accordingly.
- Icons and form controls fall under the AA UI rule (≥ 3:1) — don't forget non-text elements.
- If you can't meet AA, raise the foreground weight, darken the background, or add a coloured background plate behind the text.
Expert insights
Use real font sizes
Set the preview slider to the exact font size you'll ship — small differences flip the verdict.
Don't forget UI
Form borders, focus rings and icons need 3:1 minimum. They often fail when text passes.
Limitations to be aware of
- WCAG 2.1 only — APCA (WCAG 3 draft) is not yet implemented.
- Does not composite alpha-blended foregrounds automatically.
- Does not detect colour-blindness simulation (use a dedicated CVD tool for that).
Frequently asked questions
- What is WCAG contrast?
- WCAG (Web Content Accessibility Guidelines) defines minimum contrast ratios between text and background to ensure readability for users with low vision. The 2.1 spec requires 4.5:1 for normal text at AA, 7:1 at AAA, and 3:1 for large text or UI components at AA.
- How is the ratio calculated?
- We compute the WCAG relative luminance for each colour (linear sRGB with a 2.4-power transform) and divide the lighter by the darker, plus the 0.05 ambient term. The formula is identical to the one in WCAG 2.1.
- Does this account for opacity?
- No — alpha-blended foregrounds need to be composited against their effective background first. Compute the visible colour, then paste that into this checker.
- What counts as 'large text'?
- WCAG defines large as ≥ 18pt regular or ≥ 14pt bold. In CSS that's roughly 24px regular / 18.7px bold.
- What's the AAA target?
- AAA is the strictest WCAG level: 7:1 for normal text and 4.5:1 for large text. Use it on legal copy, error messages and any text users must read to complete a task.
- Is this WCAG 2.1 or 3?
- This tool uses the WCAG 2.1 formula. The upcoming APCA (used in WCAG 3 drafts) is a different perceptual model and is not implemented here.
- Does the tool store my colours?
- No. All calculations run in your browser. Nothing is uploaded.
- Is it free?
- Yes — no signup, no quotas, no tracking.