About ContrastScope
WCAG 2.1 Contrast Formula
The contrast ratio between two colors is calculated using the relative luminance formula from the W3C WCAG 2.1 specification:
- For each sRGB channel (R, G, B), normalize to 0–1:
c = channelValue / 255 - Linearize each channel:
if c ≤ 0.03928 → c / 12.92else → ((c + 0.055) / 1.055)^2.4 - Compute relative luminance:
L = 0.2126·R + 0.7152·G + 0.0722·B - Contrast ratio:
ratio = (L_lighter + 0.05) / (L_darker + 0.05)
The ratio ranges from 1.0 (identical colors) to 21.0 (black vs white).
Compliance Thresholds
| Category | AA (min ratio) | AAA (min ratio) |
|---|---|---|
| Normal text (< 24px / < 18.66px bold) | 4.5:1 | 7:1 |
| Large text (≥ 24px / ≥ 18.66px bold) | 3:1 | 4.5:1 |
| UI components (§1.4.11 Non-text Contrast) | 3:1 | N/A |
Find-Nearest-Pass Algorithm
The “Fix” button on audit pairs uses an HSL-based binary search to find the minimum lightness adjustment that achieves AA compliance (4.5:1):
- Determine direction: lighten or darken the foreground based on which moves luminance away from the background.
- Binary search on the HSL lightness channel (0–100) for the smallest change that reaches the target ratio.
- Return the adjusted hex — perceptually the closest passing color.
If the target ratio is unreachable (e.g. extremely close colors with no valid lightness solution), no adjustment is made.