Color contrast & format

Two colours in any CSS notation (named, hex, rgb, hsl, hwb, lab, lch, oklab, oklch, color()) and out come the WCAG contrast ratio with pass or fail at every level (AA and AAA, normal and large text, user interface components), a live preview, each colour converted to every notation with its relative luminance, and the nearest foreground that would pass each failing level. Pure arithmetic from the WCAG formulas and the CSS Color Level 4 sample code; nothing leaves the browser.

Web & HTTP

Documentation

Two colours, in any CSS notation

Foreground (text or object)

Background

Try

4.54:1 contrast ratio, from relative luminances 1.0000 (lighter) and 0.1812 (darker).

AA text 4.5:1: pass AA large text 3:1: pass AAA text 7:1: fail AAA large text 4.5:1: pass UI and graphics 3:1: pass

Preview

Body text at the usual size: the 4.5:1 rule applies here (7:1 for AAA).

Large text, 18 point or 14 point bold: 3:1 (4.5:1 for AAA).

A control's outline or a chart line: 3:1 against what is next to it.

Each colour, in every notation

Foreground (text or object)

#767676hex

rgb(): rgb(118 118 118)
hsl(): hsl(none 0% 46.27%)
hwb(): hwb(none 46.27% 53.73%)
lab(): lab(49.637 0 0)
lch(): lch(49.637 0 none)
oklab(): oklab(0.5658 0 0)
oklch(): oklch(0.5658 0 none)
linear sRGB: color(srgb-linear 0.18116 0.18116 0.18116)
CIE XYZ (D65): color(xyz-d65 0.17219 0.18116 0.1973)
Relative luminance: 0.1812

Background

#ffffffa named colourwhite

rgb(): rgb(255 255 255)
hsl(): hsl(none 0% 100%)
hwb(): hwb(none 100% 0%)
lab(): lab(100 0 0)
lch(): lch(100 0 none)
oklab(): oklab(1 0 0)
oklch(): oklch(1 0 none)
linear sRGB: color(srgb-linear 1 1 1)
CIE XYZ (D65): color(xyz-d65 0.95046 1 1.08906)
Relative luminance: 1.0000

Foregrounds that would pass

For each level the pair misses, the nearest foreground that reaches it, found by moving the foreground's lightness in OKLCH (its hue and chroma kept, chroma reduced only when the result would leave the sRGB gamut). Lighter and darker are both shown when both exist.

target	direction	foreground	ratio reached
7:1	darker	`#595959` `oklch(0.464 0 none)`	7.00:1

The arithmetic (WCAG 2.2)

Each sRGB channel (0 to 1) is linearised: c / 12.92 when c is at most 0.04045, else ((c + 0.055) / 1.055) ^ 2.4. The relative luminance is L = 0.2126 R + 0.7152 G + 0.0722 B, 0 for black and 1 for white.

The contrast ratio is (L1 + 0.05) / (L2 + 0.05) with L1 the lighter luminance and L2 the darker: (1.0000 + 0.05) / (0.1812 + 0.05) = 4.54:1. It runs from 1:1 to 21:1.

WCAG 2.2 Success Criteria: 1.4.3 Contrast (Minimum), Level AA, asks 4.5:1 for text and 3:1 for large-scale text; 1.4.6 Contrast (Enhanced), Level AAA, asks 7:1 and 4.5:1; 1.4.11 Non-text Contrast, Level AA, asks 3:1 for user interface components and graphical objects. Large-scale text is at least 18 point, or 14 point bold. Incidental text and logotypes are exempt.

The ratio is WCAG's formula over sRGB, which is what the criteria require; it is not a perceptual model, and two colours that pass can still be hard to read for some readers. Colours outside the sRGB gamut are clipped before measuring, since the criteria are defined for displayable colours. Alpha on the background is ignored (it is treated as opaque). The named colours, notations and conversions are CSS Color Level 4's; the sources are cited under Sources.

API endpointGEThttps://ronutz.com/api/v1/color-contrast-formatDocumented, not served. Opens the specification.

Color contrast & format

Preview

Each colour, in every notation

Foreground (text or object)

Background

Foregrounds that would pass

The arithmetic (WCAG 2.2)

Referencer