Color Contrast Checker
WCAG contrast ratio, graded against AA and AAA, with a live preview.
Also known as: WCAG contrast checker, Contrast ratio calculator, Accessible color checker
How it works
- 1Choose a text color and a background color, either by hex code or the visual picker.
- 2Read the contrast ratio and see which WCAG levels it passes or fails.
- 3Check the live preview to see how normal and large text actually looks in those colors.
- 4Use the swap button to quickly check the ratio in the opposite direction.
Why use Color Contrast Checker
All 5 WCAG thresholds at once
AA and AAA at both text sizes, plus the UI-component requirement — no need to look up which number applies to your case.
Live text preview
See actual sample text rendered in your chosen colors, not just a numeric ratio.
Exact WCAG formula
Uses the same relative-luminance calculation used in accessibility audits and browser dev tools.
Instant swap
Flip text and background colors with one click to check both directions.
Clear pass/fail badges
Each threshold shows an unambiguous pass or fail rather than requiring you to compare numbers yourself.
Nothing uploaded
Every calculation runs locally in your browser using plain arithmetic.
Who uses Color Contrast Checker
Accessibility audits
Verify a website's text and background color combinations meet WCAG AA before launch.
Choosing a UI color palette
Check candidate text/background pairs before committing to a design system's color tokens.
Legal compliance checks
Confirm contrast ratios meet the levels commonly referenced in accessibility compliance requirements (like ADA/Section 508 reviews).
Reviewing a design handoff
Quickly check whether colors from a design file will pass accessibility review before development starts.
Fixing a flagged contrast issue
Test adjusted color values to find one that passes after an automated accessibility scan flags a failure.
Checking button and icon contrast
Use the UI-components threshold to verify non-text elements like button borders and icons are visible enough.
About Color Contrast Checker
WCAG (Web Content Accessibility Guidelines) sets specific, testable contrast ratio requirements between text and its background, because low-contrast text is difficult or impossible to read for people with low vision, color blindness, or anyone using a screen in bright sunlight. The requirements aren't arbitrary — they're the standard that accessibility audits, legal compliance reviews, and browser accessibility tools all check against.
This tool calculates the contrast ratio using the exact WCAG relative luminance formula, then checks it against all five relevant thresholds at once: AA normal text (4.5:1), AA large text (3:1), AAA normal text (7:1), AAA large text (4.5:1), and the 3:1 requirement for UI components and graphical objects introduced in WCAG 2.1. Each shows a clear pass or fail rather than just a raw number you have to interpret yourself.
"Large text" in WCAG terms means 18pt (24px) regular weight or 14pt (18.5px) bold — smaller text needs the higher 4.5:1 or 7:1 ratios because it's harder to read at low contrast. The live preview renders both a large-text and normal-text sample in your exact chosen colors, so you can see the real-world readability rather than just trusting the math.
Every calculation happens instantly in your browser using plain arithmetic — there's no server round trip, and no limit on how many color combinations you can check.
Color Contrast Checker vs. other options
How Open Tools Library compares to desktop software and other online tools.
| Feature | Open Tools Library | Desktop software | Other online tools |
|---|---|---|---|
| Price | Free, unlimited | N/A | Usually free |
| Thresholds shown | All 5 at once | N/A | Often just AA normal |
| Live preview | Yes, both text sizes | N/A | Sometimes missing |
| UI-component check | Included | N/A | Rarely included |
| Data privacy | Never leaves your device | N/A | Usually fine, but varies |
Pro tips
- "Large text" means 18pt (24px) regular or 14pt (18.5px) bold — anything smaller needs the stricter normal-text thresholds.
- AA is the legal/practical baseline most accessibility requirements reference; AAA is a stricter, optional enhancement.
- The 3:1 "UI components" threshold applies to things like button borders, form field outlines, and icons — not just text.
- If a combination fails, try adjusting the background lightness first — small lightness changes often move the ratio more than hue changes.
- Pure black on white (21:1) is the maximum possible ratio — no combination can exceed it.
Technical specs
- Formula
- WCAG 2.x relative luminance + contrast ratio
- Thresholds checked
- AA normal, AA large, AAA normal, AAA large, UI components
- Ratio range
- 1:1 (no contrast) to 21:1 (black on white)
- Update behavior
- Live, as you type or pick a color
- Processing location
- 100% local, in your browser
Privacy & security
Checking a brand or design system's colors for accessibility compliance shouldn't require sending those colors anywhere.
Contrast ratio and WCAG grading are both calculated locally using plain arithmetic.
No account, email, or login required.
Nothing about the colors you check is stored or logged.
Equally private whether you're auditing one button or an entire design system.
Frequently asked questions
Is this tool free to use?
Yes, completely free with no limits, and no account needed.
How is my data handled?
Nothing is sent anywhere — the contrast ratio is calculated locally using standard WCAG arithmetic.
What contrast ratio do I actually need?
Most accessibility requirements are based on WCAG AA: 4.5:1 for normal text and 3:1 for large text. AAA (7:1 / 4.5:1) is a stricter, optional standard.
Does this check color blindness accessibility specifically?
This tool checks luminance-based contrast, which benefits low-vision and color-blind users broadly, but it doesn't simulate specific color-blindness types.
Can I check non-text elements like borders?
Yes — the "UI components & graphics" result uses the 3:1 threshold that applies to interactive element borders and icons, not just text.
Troubleshooting
My colors pass AA but fail AAA
This is expected and common — AAA is a stricter, optional enhancement. AA is the threshold most accessibility requirements are built around.
I'm not sure if my text counts as "large"
Large text means at least 18pt (24px) regular weight, or at least 14pt (18.5px) if bold. Anything smaller should be checked against the normal-text thresholds.
The contrast ratio seems too low even though the colors look different
Contrast ratio is based on relative luminance (perceived brightness), not just how visually distinct two hues look — two different-looking colors can still have similar brightness and low contrast.
What ratio should button borders or icons meet?
Non-text UI components and graphical objects should generally meet at least 3:1 against their background, per WCAG 2.1's 1.4.11 requirement.
Related searches
Landed here looking for something worded a little differently? Color Contrast Checker covers all of these too:
Ready to use Color Contrast Checker?
Free, private, and ready right now — no signup required.
Scroll to Color Contrast Checker