OmniCalcsAdvertisement
Color Contrast Checker
Make sure your text is readable for everyone.
Advertisement
How to Use This Tool
- Pick a text color and a background color using the pickers, or type a hex value directly.
- Read the ratio and check which WCAG levels pass. Large text means 18px regular or 14px bold.
Frequently Asked Questions
What contrast ratio do I need?
WCAG AA requires 4.5:1 for normal text and 3:1 for large text. AAA is stricter: 7:1 for normal and 4.5:1 for large.
What is relative luminance?
It measures how bright a color appears to the eye, weighting green highest and blue lowest. The ratio formula compares the two luminances.
Does this apply to icons and UI elements?
Yes — WCAG also requires 3:1 for meaningful graphics and UI components, which is the same bar as large text.
What if my color has alpha/opacity?
This checker assumes solid colors. For semi-transparent text, blend it over the background first — that composite color is what matters.
Practical Example
Dark gray #222222 on white #ffffff:
- Contrast ratio ≈ 15.6:1.
- Passes AA and AAA for normal and large text.
Trusted Sources
Advertisement