Free Color Contrast Checker
A Color Contrast Checker ensures your text is readable against its background by calculating the WCAG 2.x contrast ratio and verifying compliance with accessibility standards. Perfect for web designers and developers building inclusive interfaces.
Quick answer
Enter a text color and background color in HEX format to instantly see the contrast ratio (1:1 to 21:1) and whether it passes WCAG AA (4.5:1 for normal text) or AAA (7:1) standards. Black text on white reaches the maximum 21:1 ratio.
Formula & method
The checker uses the WCAG 2.x relative luminance formula to calculate contrast between two colors. Each hex color is converted to RGB, then to relative luminance (0–1 scale), and the ratio is computed as (lighter luminance + 0.05) ÷ (darker luminance + 0.05). The result (1:1 to 21:1) is tested against WCAG AA (4.5:1 normal, 3:1 large text ≥18pt) and AAA (7:1 normal, 4.5:1 large) thresholds.
Examples
- Input
- Text: #000000, Background: #FFFFFF
- Result
- 21:1 ratio — Passes WCAG AAA for all text sizes
- Why
- This is the highest possible contrast ratio. Black has zero luminance; white has maximum luminance. Any text of any size meets both AA and AAA standards with this combination.
- Input
- Text: #333333, Background: #F5F5F5
- Result
- 11.6:1 ratio — Passes WCAG AAA for all text sizes
- Why
- Common for body text in light-mode designs. The darker gray (#333333) has enough contrast against the off-white background to exceed even AAA standards at all sizes.
- Input
- Text: #0066CC, Background: #FFFFFF
- Result
- 5.6:1 ratio — Passes AA for normal text, AAA fails
- Why
- This ratio meets WCAG AA for normal text (≥14pt non-bold or ≥18pt bold) but falls short of AAA's 7:1 requirement. It also passes AA for large text (3:1 threshold). Suitable for links and headings but borderline for body copy.
When to use this tool
- Designing or reviewing a website, app, or document to meet accessibility (WCAG) compliance standards.
- Choosing text and background colors for content that must be readable by people with low vision or color blindness.
- A/B testing color schemes before deployment to catch readability issues early without user complaints.
Common mistakes
- Assuming relative brightness and relative luminance are the same — luminance uses a gamma-corrected formula and is not simple RGB averaging.
- Confusing WCAG AA and AAA thresholds — AA normal text requires 4.5:1, but large text only needs 3:1; AAA normal requires 7:1, large requires 4.5:1. Different rules apply by text size.
- Forgetting to check both text-on-background combinations — if your background is very dark, you may need light text instead, and that reversal changes which color is 'lighter' in the luminance calculation.
Frequently asked questions
What is WCAG and why does contrast matter?
WCAG (Web Content Accessibility Guidelines) is a W3C standard ensuring digital content is usable by everyone, including people with visual impairments. Sufficient contrast between text and background is critical for readability. WCAG 2.x defines two conformance levels: AA (minimum) and AAA (enhanced).
What's the difference between AA and AAA?
WCAG AA is the baseline standard (4.5:1 for normal text). WCAG AAA is a higher, more inclusive standard (7:1 for normal text). AAA is recommended for educational content, government sites, and products serving users with visual impairments. AA is required by law in many jurisdictions.
Does large text have different contrast requirements?
Yes. WCAG defines 'large text' as 18pt (24px) or larger, or 14pt (18.5px) bold or larger. Large text requires 3:1 for AA and 4.5:1 for AAA, which are easier to achieve than normal text (4.5:1 AA, 7:1 AAA).
Is this tool enough to guarantee accessibility?
Contrast is only one accessibility requirement. You should also test for color blindness (avoid using color alone to convey meaning), keyboard navigation, screen reader compatibility, and text size flexibility. Use this tool as part of a broader accessibility audit.
Why might colors look readable on my screen but fail this tool?
Your monitor's brightness, gamma, and color calibration affect how colors appear to your eyes, but this tool calculates contrast using the WCAG 2.x algorithm based on the actual hex values you enter. The ratio is mathematically objective; perceived readability is subjective and display-dependent.
Can I use this tool offline?
Yes. This tool runs 100% in your browser with no data uploaded to any server. You can use it offline once the page has loaded, and all calculations are instant.
Sources & references
External references open in a new tab. We are independent and not affiliated with these organizations.
- ✓ Free to use
- ✓ No sign-up required
- ✓ Runs entirely in your browser — nothing is uploaded.
- ✓ Formula and method shown above
Provided “as is” for general information only — results may be inaccurate, so verify before you rely on them. No warranty; use at your own risk.
Built and reviewed by HIFreeTools against the formula shown above and any authoritative references cited on this page. See our methodology and editorial standards.
Related tools
- HEX to RGB ConverterColor
- RGB to HEX ConverterColor
- Word CounterText
- Character CounterText
- Percentage CalculatorCalculators
- QR Code GeneratorDeveloper
Related guides
Embed this tool on your site
Free to embed, no sign-up. Paste this code where you want the color contrast checker to appear: