A text contrast ratio is a number that expresses how different a text color looks against its background, measured in terms of luminance. It ranges from 1:1 — when both colors are identical and text is completely invisible — to 21:1 — the maximum, achieved by pure black on pure white. The WCAG guidelines use this ratio to define minimum thresholds for readable text on the web.
How contrast ratio is calculated
The WCAG contrast ratio formula works in three steps. First, each sRGB color channel (R, G, B) is normalized to the 0–1 range and linearized with a gamma correction:
Else: C_linear = ((C_sRGB + 0.055) / 1.055) ^ 2.4
Second, the relative luminance of each color is computed by weighting the three linearized channels. The weights reflect human eye sensitivity: green contributes the most to perceived brightness, red less, and blue the least.
Third, the contrast ratio is computed from the two luminance values:
The + 0.05 offset prevents division by zero when one color is pure black (luminance = 0) and models the ambient reflected light in a typical viewing environment.
Required contrast ratios for WCAG compliance
The required ratio depends on the compliance level and the size of the text:
| Text type | WCAG AA | WCAG AAA |
|---|---|---|
| Normal text (below 18pt / 14pt bold) | ≥ 4.5 : 1 | ≥ 7 : 1 |
| Large text (≥ 18pt or ≥ 14pt bold) | ≥ 3 : 1 | ≥ 4.5 : 1 |
| UI components and icons | ≥ 3 : 1 | — |
AA is the standard legal requirement in most countries. AAA is an enhanced target that many organizations adopt for body text in high-stakes content.
Reference ratios — common color pairs
To build an intuition for what different ratios look like, here are some reference pairs against a white background:
| Color | Hex | Ratio on white | AA normal | AAA normal |
|---|---|---|---|---|
| Pure black | #000000 | 21 : 1 | Pass | Pass |
| Dark grey | #595959 | ≈ 7.1 : 1 | Pass | Pass |
| Medium grey | #767676 | ≈ 4.54 : 1 | Pass | Fail |
| Light grey | #949494 | ≈ 2.85 : 1 | Fail | Fail |
| Typical brand blue | #0055CC | ≈ 6.1 : 1 | Pass | Fail |
| Light brand blue | #4D90FE | ≈ 3.0 : 1 | Fail | Fail |
Why the ratio is not linear
A jump from 3:1 to 4.5:1 is perceptually significant: it represents moving from a clearly legible large heading to a standard body text minimum. A jump from 10:1 to 11.5:1 is barely noticeable. The contrast ratio scale is logarithmic in practice, not linear. This is why absolute numbers alone can be misleading — a ratio of 4.6:1 and one of 7:1 both pass AA, but the second is dramatically more readable for users with reduced contrast sensitivity.
This non-linearity is also why WCAG 3 is developing the APCA (Advanced Perceptual Contrast Algorithm), which produces a more perceptually uniform scale using a different formula. The Flowfiles contrast checker shows the APCA Lc value alongside the WCAG 2.x ratio so you can evaluate both.
How to improve a failing text contrast ratio
The fastest way to fix a failing ratio is to adjust the text color's lightness in HSL space. Keeping the hue and saturation constant and moving only the lightness preserves brand color identity while increasing contrast. For example, if your text is #94A3B8 on white (approximately 2.5:1 — a fail), shifting the lightness downward until you reach around 50–55% will typically get you to 4.5:1.
If adjusting the text color is not acceptable (for example, a fixed brand color on a variable background), the alternative is to darken the background. A slightly off-white background can reduce the ratio; moving it to a true white or a very light warm grey can increase the ratio for a dark text color.
The Flowfiles WCAG contrast checker includes an automatic suggestion that finds the nearest color to your current text value that passes the target level — either AA (4.5:1) or AAA (7:1) — by stepping through HSL lightness values. This makes fixing a failing ratio a one-click operation.