Formula
Contrast ratio = (Llighter + 0.05) ÷ (Ldarker + 0.05) using relative luminance.
How to use Contrast Checker
- Enter required fields or pick colors on the visual controls.
- Adjust advanced options like tax rate, angle, or font size.
- Preview the result pane or live CSS output.
- Copy, download, or print according to the tool’s export buttons.
Worked examples
Concrete numbers and cases you can check against the tool above.
Typical workflow
#2563EB on #FFFFFF yields strong contrast for body links; verify large headings separately.
When to use Contrast Checker
Low contrast fails accessibility audits and hurts readability in sunlight. Test before developers implement tokens.
Common use cases
- Validate button label color on brand blue.
- Check gray body text on off-white backgrounds.
- Prove compliance for government RFP designs.
Inputs and outputs
- HEX, RGB, HSL values
- CSS snippets
Privacy
This tool runs entirely in your browser. Your data never leaves your device — nothing is uploaded to our servers.
Frequently asked questions
- What ratio passes WCAG AA?
- Normal text needs 4.5:1; large text (18pt+ or 14pt bold) needs 3:1.
- Does it simulate color blindness?
- This tool focuses on contrast ratio; use a simulator separately for protanopia checks.
- Are alpha channels supported?
- Flat colors work best; semi-transparent text on photos needs manual judgment.