ToolKitSphereContrast Ratio Checker for WCAG AA & AAA
FeaturedCheck WCAG contrast ratio between text and background colors for accessibility compliance.
Output will appear here
Click in the output to select all text
Related tools
WCAG Accessibility Compliance Checker
Comprehensive WCAG 2.1 AA & AAA compliance test for normal text, large text, and UI components.
Accessible Color Pair Finder
Find the closest accessible text color (black, white, or adjusted hue) meeting WCAG AA.
Color Blindness Simulator
Simulate how colors appear to Deuteranopia, Protanopia, Tritanopia, and Achromatopsia vision.
Interactive Color Picker & Multi-Format Inspector
Visual color picker showing real-time HEX, RGB, HSL, HSV, and CMYK formats.
Color Distance & Delta E Calculator
Calculate Euclidean and CIE76 Delta E perceptual color distance between two colors.
All-in-One Color Value Converter
Convert simultaneously across HEX, RGB, RGBA, HSL, HSLA, HSV, CMYK, and HWB formats.
This contrast ratio checker calculates the precise WCAG contrast ratio between any text color and background color, then tells you instantly whether the combination passes AA or AAA accessibility standards for both normal and large text. It's built for web developers implementing accessible interfaces, designers choosing text-on-background color pairings, and QA teams auditing sites for WCAG compliance. Enter or pick a foreground and background color and the tool calculates the exact ratio using the official WCAG relative luminance formula, showing clear pass/fail badges for AA normal text (4.5:1), AA large text (3:1), AAA normal text (7:1), and AAA large text (4.5:1). All calculations run locally in your browser, so the color combinations you're testing, which may reflect unreleased branding or products, are never uploaded or logged. Because the formula matches the official W3C specification exactly, the ratio and pass/fail results you see are the same ones an accessibility auditor or automated testing tool would report. Enter your colors below to check the contrast ratio.
Features
- Calculates exact WCAG 2.x contrast ratio between two colors
- Pass/fail badges for AA normal text (4.5:1)
- Pass/fail badges for AA large text (3:1)
- Pass/fail badges for AAA normal text (7:1)
- Pass/fail badges for AAA large text (4.5:1)
- Live text preview rendered in the chosen colors
- Accepts HEX, RGB, or HSL for foreground and background
- Real-time recalculation as either color changes
Why use this contrast ratio checker (wcag aa/aaa)?
- Instant, real-time ratio calculation
- Fully client-side, keeping brand and product colors private
- Exact W3C-spec relative luminance formula, no approximation
- Clear pass/fail badges that need no interpretation
- Completely free with unlimited checks
Frequently asked questions
What WCAG contrast ratio do I need for AA compliance?
WCAG AA requires a contrast ratio of at least 4.5:1 for normal text and at least 3:1 for large text (18pt or 14pt bold and larger).
What ratio is required for AAA compliance?
WCAG AAA requires a contrast ratio of at least 7:1 for normal text and at least 4.5:1 for large text.
How is contrast ratio calculated?
It's calculated from the relative luminance of both colors using the formula (L1 + 0.05) / (L2 + 0.05), where L1 is the lighter color's luminance and L2 is the darker one's.
What counts as 'large text' for WCAG purposes?
Large text is defined as at least 18pt (24px) regular weight, or at least 14pt (18.66px) bold.
Does contrast ratio apply to UI components too?
Yes, WCAG 2.1's 1.4.11 Non-text Contrast criterion requires a minimum 3:1 ratio for UI components and graphical objects, separate from text contrast.
Why did my color pair fail even though it looks readable to me?
Perceived readability can be misleading; the WCAG formula is based on measured luminance, so some combinations that look fine to one person's eyes still fall short of the numeric standard.
From the blog
WCAG Contrast Ratios Explained: AA vs AAA
What the WCAG contrast ratio numbers mean, how 4.5:1 and 7:1 were chosen, when large text qualifies for 3:1, and how to decide whether you need AA or AAA.
How to Fix Failing Color Contrast on Your Site
A step-by-step process to fix color contrast failures without wrecking your brand palette: triage by impact, shift lightness not hue, and repair tokens at the source.
Why You Shouldn't Rely on Color Alone
WCAG 1.4.1 Use of Color is Level A. Exactly what color alone accessibility forbids, the four places designs break it, and non-color indicators that work.