Color Contrast Checker
Color contrast checker
Calculate WCAG contrast ratio between text and background colors.
Inputs
Value 1
17.74:1
Pass AA and AAA for normal text
Color preview
Value 1
17.74:1Formula
Contrast ratio = (L1 + 0.05) / (L2 + 0.05) Symbol legend
| Symbol | Meaning | Unit | Copy |
|---|---|---|---|
CR | Contrast ratio | ratio | |
L_1, L_2 | Relative luminance values | 0 to 1 |
- Compute relative luminance for both colors.
- Use lighter luminance as L1 and darker as L2.
- Apply ratio formula to evaluate readability.
Example
Worked example: black on white
- 1 Lighter luminance = 1
- 2 Darker luminance = 0
- 3 Ratio = 21 to 1
Black text on white background yields 21:1 contrast.
How
- Pick foreground and background colors.
- Run contrast calculation.
- Read ratio and pass guidance label.
Avoid
- Checking contrast on wrong foreground and background order.
- Using brand colors without accessibility validation.
- Assuming large-text thresholds apply to all text sizes.
Checks
Best fit
Color Contrast Checker is built for measure text and background contrast ratio with wcag-style pass guidance. If Color Contrast Checker does not match the input scope, compare the answer with a second method.
Input check
Check CR before calculating: it means contrast ratio and is measured in ratio.
Sanity check
For Color Contrast Checker, use the worked example as a quick benchmark: Black text on white background yields 21:1 contrast. If the color contrast checker answer is far away, check whether an input, unit, or mode changed.
Before copying
Review this common issue first: checking contrast on wrong foreground and background order.
FAQ
What contrast passes normal text AA?
A ratio of at least 4.5 to 1 is commonly used for normal-text AA.
Is 3 to 1 enough for large text?
Large text often uses a 3 to 1 threshold for AA guidance.
Does this checker include font weight?
No, ratio is color-based and does not inspect font rendering details.
Switch
Switch12
No match.