Color Contrast Checker
Check WCAG AA / AAA contrast between any two colors with live preview.
Sample Headline
The quick brown fox jumps over the lazy dog.
Small text at 13 px — the hardest contrast case. If this reads, you’re in good shape.
Contrast Ratio
6.33
:1
Normal AA
Got 6.33:1
Normal AAA
Got 6.33:1
Large AA
Got 6.33:1
Large AAA
Got 6.33:1
About Color Contrast Checker.
WCAG Contrast Ratio Checker for Designers and Developers
Pick a foreground color and a background color. CipherForces Contrast Checker computes the WCAG 2.1 relative-luminance contrast ratio, grades it for both AA and AAA at normal and large text sizes, and shows a live text preview so you can see how it actually reads.
WCAG 2.1 requires a contrast ratio of at least 4.5:1 for normal text (AA) and 7:1 for AAA. Large text (18pt+ regular or 14pt+ bold) has lower thresholds of 3:1 and 4.5:1 respectively. Failing these fails accessibility audits and excludes visually impaired users from reading your content.
Common Use Cases
- Design-system audits: Validate every foreground/background pair in your brand palette.
- Pre-deployment checks: Ship a component library with documented, verified contrast ratios.
- Client requirements: Meet ADA compliance requirements (public-sector, banking, healthcare, education).
- Button and CTA design: Confirm your primary button's white-on-color passes AA for all states including hover and disabled.
Features
- Live preview: Editable sample text updates as you tweak the colors.
- Four grades shown: Normal AA · Normal AAA · Large AA · Large AAA — each with pass/fail indicator and the exact threshold.
- Adjust to pass: Click "nudge to AA" and the tool snaps the foreground to the nearest tone that meets the threshold.
- Supports all color formats: Hex, rgb(), rgba(), hsl() — paste or pick from a color input.
Privacy: Pure math, pure JavaScript. No network calls. Paste internal brand colors without sharing them with anyone.
Frequently asked questions.
How do I check the color contrast between two colors?
Enter your text color and background color using the pickers or hex fields. The tool instantly calculates the contrast ratio, shows whether it passes WCAG AA and AAA, and renders a live preview so you can see how the combination looks before applying it to your design.
Is my color data uploaded to a server when I use this checker?
No. The Color Contrast Checker runs entirely in your browser using JavaScript. Your colors, hex codes, and any preview text are processed locally on your device and never leave it. Nothing is uploaded to a server, there is no signup, and the tool is completely free to use.
Does this tool check both WCAG AA and AAA contrast requirements?
Yes. It evaluates your color pair against both WCAG AA and AAA thresholds and shows a clear pass or fail for each. Because AA and AAA use different ratio requirements for normal and large text, you can confirm which accessibility level your combination meets at a glance.
Can I use the color contrast checker for free without an account?
Yes. The tool is free with no signup, no login, and no usage limits. It runs client-side in your browser, so you can check as many color combinations as you want. Nothing installs and nothing is stored on a server, so you can start testing accessibility immediately.
How to use Color Contrast Checker.
Enter your input
Type or paste what you want to work with.
Choose settings
Adjust the options for what you need.
Get instant results
Your result updates right on the page.
Related dev tools.
Privacy-first tools that work everywhere.
Need more than a tool?
Custom websites and web apps that you own — from $799 one-time.
Explore all 82 tools