Contrast Ratio Checker
Quick answer
Enter foreground and background colors—see a contrast ratio and pass/fail hints for common WCAG levels.
For a related estimate, see Color Converter.
Explore further: Color Picker Tool · Css Gradient Generator
Limits
The math assumes opaque layers—gradients and images need sampling worst-case pixels; transparency stacks require compositing awareness.
Explore further: Color Palette Generator · Gradient Generator
Contrast ratio compares relative luminance of text and background; WCAG defines AA/AAA thresholds for normal and large text. Use it for buttons, links, and body copy on colored or image backgrounds. See also Accessible palette for a related utility in this cluster.
How to use this calculator
- Open the tool: Sample text and surface colors (solid fills first).
- Tune inputs: Read the ratio for normal vs large text thresholds.
- Read the output: Adjust lightness or weight until the pair passes your target.
Real-world examples
- Body text: Aim for ≥4.5:1 for AA at normal size; 3:1 for large text per WCAG 2.x guidance.
- UI chrome: Non-text components have different SC—don’t reuse text ratios blindly.
Tips & gotchas
Test hover/focus states—contrast often fails only on `:hover` when colors shift slightly.
FAQ
Does this guarantee legal compliance?
No—it is a helper. Formal audits include more than contrast alone.
Does this tool send my text to a server?
Calciverse runs in your browser; we do not store your inputs on our servers for these utilities. Anything that uses network APIs (for example DNS lookup) only sends what you explicitly request.
Why do results differ from another site?
Rounding, defaults, and implementation details (color spaces, tokenizers, DNS resolvers) can differ. Compare definitions, not just the headline number.