Contrast Ratio Calculator
WCAG contrast ratio with AA and AAA verdicts for any color pair.
What it does
Contrast ratio measures how far text luminance stands from its background. The formula linearizes both sRGB colors, adds a small floor, and divides lighter by darker into one number from 1 to 21.
The tool above takes two hex colors. It returns the ratio with normal and large text verdicts against WCAG AA and AAA lines.
The default black on white divides 1.05 by 0.05 for the maximum 21:1, AAA at every size. Gray #777 on white lands 4.48:1, failing normal text while passing large text AA.
Thresholds follow W3C WCAG 2.1 success criteria (4.5 AA and 7 AAA normal, 3 and 4.5 large) with MDN contrast guidance matching them. Both exempt logos, decoration, and inactive controls.
How to use
- Enter the text color as 6 digit hex.
- Enter the background color the same way.
- Read the ratio first for the raw number.
- Read normal text for body copy verdicts.
- Read large text for headings 18pt+ (14pt+ bold).
Formula
- linearize
- Undo sRGB gamma before comparing.
- 0.2126/0.7152/0.0722
- Human eye weights favoring green.
- +0.05
- Floor keeping dark pairs defined.
Hex must be six digits; shorthand and names are rejected so parsing stays exact. Order never matters since lighter always divides by darker.
Worked example
Example: black on white
Text #000000, background #FFFFFF.
- Black luminance: 0. White: 1.
- Add floors: 1.05 over 0.05.
- Ratio: 1.05 / 0.05 = 21:1.
- Normal 21 passes 7: AAA. Large passes too.
- Tool shows 21:1, AAA normal text, AAA large text.
Reference table
| Level | Normal text | Large text |
|---|---|---|
| AA | 4.5 (#767676 on white fails at 4.48) | 3.0 |
| AAA | 7.0 | 4.5 |
| Black/white | 21 (AAA) | 21 (AAA) |
| Red/white | 4.0 (fail normal) | 4.0 (AA large) |
Limits
- Color pairs only; fonts and spacing need human review.
- Hex input only in this tool.
- Logos and decoration carry no requirement.
- Real screens shift colors with brightness and mode.
Common mistakes
- Testing brand hex against the wrong background.
- Reading large text pass as body copy pass.
- Using three digit shorthand that this tool rejects.
- Ignoring dark mode reversals of the pair.
- Trusting screenshots over computed ratios.
Try it yourself
Quick checks. Answers sit tucked under each question.
#777 on white?
4.48:1: Fail normal, AA large.
Red on white?
4:1: Fail normal, AA large.
Same color twice?
1:1: Fail everywhere.
Questions
What is a good contrast ratio?
4.5+ for body (AA), 7+ for AAA. Black on white is 21.
Normal vs large text?
Large means 18pt+ (14pt+ bold): 3 AA and 4.5 AAA instead of 4.5 and 7.
Why does gray fail?
#777 on white is 4.48, just under the 4.5 normal line.
Do logos need contrast?
No. Logotypes, decoration, and inactive controls are exempt.
How is luminance found?
Linearize sRGB channels, then weight 0.2126, 0.7152, 0.0722.
Does order matter?
No. Lighter always divides by darker either way round.