Color Contrast Checker – Check Color Online (Free Tool)
Free online Color Contrast Checker tool to check WCAG color contrast ratios. Ensure your colors meet accessibility guidelines for text readability. Perfect for web accessibility.
Example Output
White on Tailwind blue-500: enough contrast for body text under WCAG AA, but not strict enough for AAA body text.
Ratio 4.56 — AA Pass (Normal), AAA Fail (Normal), AA/AAA Pass (Large)
What is Color Contrast Checker?
Color Contrast Checker computes the WCAG 2.1 contrast ratio between two colours and tells you whether the pair clears AA and AAA thresholds for both normal and large text. Run it before shipping a design to catch low-contrast typography that hurts readers with low vision — and to defend your colour choices in design review.
Why use this tool?
- No telemetry, no tracking pixels, no third-party scripts
- Open-and-go: bookmark the page once and never look for an alternative
- Instant results — no waiting on a server or upload progress bar
- Outputs valid CSS, Tailwind, and design-tool color formats side-by-side
- Works with any color input format — HEX, RGB, RGBA, HSL, HSLA, named colors
How to use
- Set the foreground (text) and background colours via picker or HEX
- Read the contrast ratio (1:1 to 21:1) and the AA/AAA verdict for both normal and large text
- Tweak either colour until the badge turns green to pass WCAG
- Copy the final HEX pair into your design system
Examples
Verify a brand button
White text on #0066CC scores ~4.9:1 — AA Pass for normal text. Switch to #004999 and you cross the AAA threshold at 7.1:1.
Fail-fast a low-contrast pair
#888888 on #FFFFFF is only 3.5:1. The badge flags AA Fail for body text — bump the foreground to #595959 to hit 7:1 AAA.
Common use cases
- Auditing a design system for AA/AAA compliance before launch
- Picking accessible link/button colour pairs against a brand background
- Spot-checking generated palette swatches against neutral backgrounds
- Documenting contrast scores in an accessibility review
Troubleshooting
- "Large text" passes but "Normal text" fails.
- WCAG defines large text as 18pt+ (or 14pt+ bold) — about 24px regular / 18.66px bold. If your headline qualifies as large, the lower 3:1 threshold applies and you may already be fine. Body copy needs 4.5:1.
- Ratio differs slightly from another contrast tool.
- We use the WCAG sRGB-relative-luminance formula. Some tools use perceptual contrast (APCA) which is a newer model — both can be correct depending on the spec you target.
Frequently Asked Questions
WCAG (Web Content Accessibility Guidelines) sets standards for color contrast to ensure text is readable. WCAG 2.1 requires a minimum contrast ratio of 4.5:1 for normal text and 3:1 for large text at Level AA.
Try these related tools
Explore more Color Tools
Discover other free, privacy-first tools in Color Tools.