Free Contrast Checker
Check whether a text and background color pair is readable.
Run a contrast check
Reference
The result includes a contrast ratio, AA status, AAA status, and a live text preview for the selected foreground and background colors.
WCAG contrast thresholds are 4.5:1 for normal AA text, 3:1 for large AA text, 7:1 for normal AAA text, and 4.5:1 for large AAA text. See the W3C WCAG contrast guidance.
Workflow Notes
Best for
- Quickly validating one foreground and background pair before a release or style update, especially during visual QA.
- Checking brand token pairs when a designer and engineer both need a shared, reproducible contrast baseline.
- Testing color choices that will be used in buttons, body copy, labels, or badges where accessibility risk is high.
- Verifying that a color extracted from another source works for small text and does not need immediate rework.
Check before using it
- Confirm the exact foreground value in hex or picker output and avoid using approximate names only.
- Confirm whether the target text is normal size or large size, because this changes the required WCAG threshold.
- Identify the final rendered context: same font family, weight, and opacity level should match where users will actually read it.
- If the element appears on hover, focus, disabled, or selected states, decide which state you are validating before clicking check.
Review the output
- Read the contrast ratio and ensure AA normal and large rows align with the expected acceptance target for that UI element.
- Check AAA rows for headings, hero text, and important controls where stricter readability is desired.
- Use the preview text in the same font weight and style if possible, then compare with how the pair appears in the target screen.
- Re-run checks for each component variant, including dark mode and light mode if both exist.
Limits to keep in mind
- The checker computes contrast from two solid colors only and does not simulate gradients, inner shadows, blur, image overlays, or border glare effects.
- Alpha transparency is not part of the picker output, so semi-transparent layers and glassmorphism effects are outside this direct result.
- Live updates only cover color pairs, so adjacent colors, spacing, letter spacing, line height, and font choices still need separate review.
- The results are browser-side calculations and a fast gate, not a full accessibility certification of an entire page.
Handoff
- Move to Color Palette Extractor when you need reliable hex values from screenshots, product art, or screenshots before another round of checks.
- Move to Color Accessibility Auditor when you need to scan multiple pair combinations from a full palette at once.
- Move to CSS Gradient Generator if your next task is a gradient background and you need exported gradient code before rechecking specific sampled points.
- If contrast remains borderline, hand off to design and engineering with exact passing and failing pairs plus the text-size assumption used.
How to Use
- Pick or type the exact foreground color and background color values that will be used in the target component, including any theme-specific state if possible.
- Press Check Contrast, or adjust either color picker and watch the result update so you can quickly sweep several alternatives.
- Review the generated ratio and four status rows for AA normal, AA large, AAA normal, and AAA large. A ratio alone is useful, but each status line has the practical acceptance rule
- Use the live preview box as a quick visual sanity check. If the preview text is still hard to read, keep testing variants even when some rows show Pass.
- Copy the selected values and pass the result to your design or engineering handoff only after confirming it against the real component background and size.
FAQ
Is Contrast Checker free?
Yes. It runs in the browser and does not require an account.
What does it do?
Test foreground and background color pairs in the browser against WCAG AA and AAA contrast thresholds for accessible text.
What should I use next?
Usually Color Palette Extractor is the next step when you want to generate a practical color palette from a source image, then export it in format-ready output for quick design, UI, and brand prototyping workflows.
Is this tool really free and private?
Yes. It is a browser-based tool with no account requirement, no login gate, and no remote processing path required to run the check.
What do the AA and AAA rows mean in this output?
AA normal means at least 4.5 to 1 for typical body text. AA large means at least 3 to 1. AAA normal is 7 to 1 and AAA large is 4.5 to 1.
Can I trust one passing pair as accessible everywhere in my app?
No. Use it as a baseline, then repeat in each actual context because background state, shadow, opacity, and adjacent colors can reduce perceived readability.
What should I do if my pair fails but business requirements are fixed?
Try alternate text color, adjust background shade, or increase contrast by lightening or darkening one side. If visual style is fixed, record the exception and raise it in your accessibility notes.
What should I validate before sharing results to the team?
Confirm font size category, final component background condition, one light and one dark variant if applicable, and that the preview and ratio both meet your design goal.
Related Tools
Related Guides
Continue the Workflow
When this step is finished, move to the tool that handles the next production risk.
Privacy
This tool runs in your browser, and inputs stay on your device until you choose to copy or download the result.
Update Log
- 2026-06-10: Added workflow notes, output checks, limits, and handoff guidance.