WCAG 2 contrast ratio and APCA, side by side

Compare a colour pair

Contrast that follows text size

The heading below takes its size from the window. Its colours are worked out from that rendered size: at 64px it is a soft tone on a tinted panel, and as it shrinks the text moves to full black (white in dark mode) and the panel to white (black). Resize the window, or set a size by hand.

Rendered size

—

—

Colours

—

text on background

WCAG 2 ratio

—

—

APCA Lc

—

—

The same rule at fixed sizes

How it works

tan(atan2(1em, 1px)) turns an element's rendered font size into a plain number of CSS pixels, which colour functions can use. The text colour sits on an inner element because Chromium resolves em inside the color property against the parent's font size; the inner element inherits the specimen's size, so it works either way.

.specimen {
  --s: tan(atan2(1em, 1px));                /* rendered size in px */
  --t: clamp(0, (var(--s) - 18) / 46, 1);   /* 0 at 18px, 1 at 64px */
  background: oklch(calc(1 - 0.09 * var(--t)) calc(0.035 * var(--t)) 250);
}
.specimen > .ink {
  color: oklch(calc(0.58 * var(--t)) calc(0.09 * var(--t)) 262);
}

Where this site uses it

Headings on this site that use the default text colour shift toward the accent colour as they get larger, from 24px up to 44px, and keep full contrast at smaller sizes. Both ends of that range measure at least 4.5:1 on every surface, in light and dark mode. The Heading tint slider under Reading options turns it down or off, and it switches off by itself when your system asks for more contrast or when you pick one of the panel's colour themes.

Method

• WCAG 2 ratio: relative luminance of each colour, then (lighter + 0.05) divided by (darker + 0.05). Large text is at least 24px, or at least 18.66px when bold (WCAG 2 defines it as 18 point, or 14 point bold).
• APCA: the 0.0.98G-4g constants published in the apca-w3 reference code. The result is signed: positive for dark text on a light background, negative for light text on a dark one.
• APCA guide levels: a simplified reading of APCA's Bronze simple mode. Lc 75 for body-size text, Lc 60 for text from 24px (or 16px at 600 weight and heavier), Lc 45 from 36px (or 24px heavy). APCA's full font lookup table is finer than this.
• Neither measure sees anti-aliasing, the typeface's actual stroke width, or text over images. Colours are read as the browser paints them, after any opacity or theme.