Contrast Color Generator
Color contrast checker
Calculate WCAG contrast ratio between text and background colors.
Inputs
2Live
Value 1
17.74:1
Pass AA and AAA for normal text
Live update
Color preview
#111827
#ffffff
Value 1
17.74:1Flow
- 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.
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.