Contrast Check Sheet
The real WCAG arithmetic, the four thresholds, and the ceiling for any background.
BFCBrilliance · bfcbrilliance.com/tools/color-contrast-ratio-calculator
The standard
- CONTRAST RATIO
- (lighter + 0.05) ÷ (darker + 0.05)
- Linearise each channel
- ≤0.04045: c÷12.92 · else ((c+0.055)÷1.055)^2.4
- Luminance weights
- 0.2126 red · 0.7152 green · 0.0722 blue
- AA body text
- 4.5:1
- AA large text
- 3:1 — large is 18pt, or 14pt bold
- AAA body text
- 7:1
- AAA large text
- 4.5:1 — the SAME as AA body text
- The range
- 1:1 identical, up to 21:1 black on white
- ⚠ Green dominates
- 0.7152 against blue's 0.0722 — nearly 10x
Pairs checked
| Where | Text | Background | Ratio | AA body? | AAA? |
|---|---|---|---|---|---|
This pair
- Component
- Date
- Text R G B
- Background R G B
- CONTRAST RATIO
- AA body headroom
- AA large headroom
- AAA body headroom
- Black on this bg
- White on this bg
- BEST POSSIBLE
- Verdict
Checking a palette honestly
- Every text-on-background PAIR checked, not just the main one
- Large text confirmed as 18pt or 14pt bold before using the 3:1 threshold
- Disabled, placeholder and hint text included — they are usually the worst
- Link colours checked against the background AND against body text
- Text over images or gradients checked at its WORST point, not its average
- Focus and hover states checked, not only the resting state
- Best-possible figure consulted before nudging the text colour repeatedly
- Colour blindness considered separately — the ratio does not cover it
If black and white both fail, the background is the problem
Plain black or plain white is nearly always the best contrast available against a given background, so those two figures are the ceiling. On a mid-grey #808080 the best available is 5.32:1, which means AAA body text at 7:1 cannot be reached there by any text colour at all. Learning that at the start saves three rounds of adjusting the wrong thing.
One step can flip it
#767676 on white scores 4.54 and passes AA body text. #777777 scores 4.48 and fails. That is one value on each channel, and it is why headroom is shown as a signed difference rather than a tick — as a proportion of the threshold the failing one rounds to 1.00 and reads like a pass.