Contrast Checker
Check WCAG AA and AAA contrast for any text and background colour pair, with a fix suggestion.
Browser onlyYour data never leaves this device.
Runs entirely in your browser. The colours you enter are never sent or stored.
Details: Privacy policy
Colours
Result
Large heading sample
Body text sample: the quick brown fox jumps over the lazy dog.
Large text sample at 18.66px bold
- Contrast ratio
- 14.68:1Higher is better. Body text needs at least 4.5:1.
- Verdict for body text
- Passes AA2.5:1 would be the bare minimum for decorative graphics only.
| Check | Needs | Result |
|---|---|---|
| AA body text (4.5:1) | 4.5:1 | Pass |
| AA large text (3:1) | 3:1 | Pass |
| AAA body text (7:1) | 7:1 | Pass |
| AAA large text (4.5:1) | 4.5:1 | Pass |
| UI component or graphic (3:1) | 3:1 | Pass |
Contrast Checker compares a text colour with a background colour and reports the WCAG 2.x ratio, then shows which AA and AAA thresholds the pair passes. It uses the same colour parser as the Color Converter, so a value like hsl(220, 100%, 60%) is read identically on both pages. The result is deliberately explicit: each check is labelled with its threshold and a Pass or Fail word, not just a green dot, because colour-only feedback is exactly the accessibility mistake this tool exists to catch. When the pair fails, the checker proposes the nearest same-hue colour that reaches 4.5:1, computed by stepping lightness rather than guessing, and lets you apply it in one click. Everything runs locally; no colour, page or screenshot is uploaded, and nothing is stored.
How to use Contrast Checker
- Enter or pick the text and background colours.
- Read the ratio and the per-check Pass or Fail results.
- Apply the suggested accessible colour if the pair fails.
What you get
- The contrast ratio with two decimals.
- Pass or Fail for AA and AAA body and large text, plus UI components.
- A nearest same-hue suggestion that reaches 4.5:1 when one exists.
When to use Contrast Checker
- Check a button label against its background before shipping.
- Verify body text contrast on a new brand palette.
- Find a darker version of a link colour that still passes AA.
- Audit placeholder and muted text colours that look faint on screen.
Frequently asked questions about Contrast Checker
What ratio does normal body text need?
WCAG AA requires 4.5:1 for normal text and 3:1 for large text. AAA raises those to 7:1 and 4.5:1 respectively.
Does the checker use APCA instead of WCAG 2?
No. It implements the WCAG 2.x relative-luminance formula, which is the model referenced by most current accessibility rules. APCA is a different method and would give different numbers.
How is the suggested colour chosen?
The checker keeps the hue and saturation, steps lightness toward the background's opposite, and returns the first colour that reaches 4.5:1. If no lightness works, it says nothing rather than offering a failing colour.
Is contrast the only accessibility requirement?
No. Focus visibility, text size, spacing, motion and semantics all matter. Contrast is one measurable part of the picture.
Tools related to Contrast Checker
- Smooth Shadow Generator
Interactive smooth shadow generator to build multi-layered realistic CSS and Tailwind box-shadows with real light physics in your browser.
- Color Converter — convert any colour between HEX
Convert any colour between HEX, RGB, HSL, HSV and CMYK, with WCAG luminance.
- Image Color Picker
Sample exact pixel colours from an image and read them as HEX, RGB, and HSL values.
- Aspect Ratio Calculator — reduce two dimensions to their simplest ratio
Reduce two dimensions to their simplest ratio, find the missing width or height, and check a size against a ratio.
- Base64 to Image
Decode a data URL or raw Base64 string back into a verified PNG, JPEG, WebP, or GIF image.
- Compress WebP — re-encode WebP images at a chosen quality and report
Re-encode WebP images at a chosen quality and report the exact byte change.
⚡Embed Contrast Checker on Your Site & Get Badge↓
Embed this in-browser tool into any blog, documentation, or dashboard. Includes an optional dofollow backlink badge to credit Tools Hub.
<iframe src="https://salaq.com/embed/image/contrast-checker" title="Contrast Checker — Tools Hub" width="100%" height="640" style="border:0;border-radius:12px;overflow:hidden;max-width:100%;" loading="lazy"></iframe>
<p style="font-size:12px;color:#6b7280;margin-top:6px;font-family:system-ui,-apple-system,sans-serif;">Powered by <a href="https://salaq.com/tools/image/contrast-checker" target="_blank" rel="noopener" style="color:#2563eb;text-decoration:underline;">Contrast Checker on Tools Hub</a></p>Feedback
Send feedback about this tool (placeholder — feedback collection is not wired up yet).