Built and fact-checked by the DocNectar team — see our editorial standards
Key Features
Instant Calculation
Get accurate results in real time with our optimized algorithm.
Mobile Friendly
Fully responsive design. Works on all devices & screen sizes.
Privacy Focused
Your data stays on your device. We don't store any inputs.
100% Free
No hidden costs. This tool is completely free forever.
Web accessibility guidelines (WCAG) require enough contrast between text and its background for people with low vision to read it comfortably — measured with an exact formula based on each color's relative luminance, not just a visual guess.
This checker calculates the exact WCAG contrast ratio between two colors and checks it against AA and AAA standards.
How it works
Enter a foreground (text) color and a background color. The checker calculates each color's relative luminance using the WCAG formula, then computes the contrast ratio between them and compares it against the AA and AAA accessibility thresholds.
- Enter foreground (text) color.
- Enter background color.
- Click Calculate to see your results.
Examples
Black on white
Black text (#000000) on a white background (#FFFFFF) has a contrast ratio of exactly 21:1 — the maximum possible contrast, comfortably passing every WCAG standard.
Who should use it
- Verifying a website's color palette meets WCAG accessibility contrast requirements.
- Checking specific text/background color combinations before finalizing a design.
Industry applications
- Web accessibility and design
- UI/UX design and front-end development
Advantages
- Uses the exact official WCAG luminance and contrast formulas, not an approximation.
- Checks against both AA and AAA thresholds for normal and large text.
Limitations
- Only checks two solid colors — doesn't account for text over images, gradients, or semi-transparent overlays.
Common mistakes to avoid
- Judging contrast by eye alone — perceived contrast can be misleading, especially for certain color combinations, which is why the WCAG formula uses precise luminance math instead.
- Only checking contrast for body text and forgetting about smaller UI elements like placeholder text or disabled states, which still need to meet minimum contrast requirements in most contexts.
Best practices
- Aim for AA compliance (4.5:1 for normal text) as a baseline for any public-facing website — it's the most widely required and cited accessibility standard.
Tips
- When a color combination fails, the most reliable fix is usually darkening the darker color or lightening the lighter one — small hue adjustments alone often aren't enough to meaningfully change the contrast ratio.