Pixel's Design Studio

APCA Explorer

Two colors in. Every usable font size and weight out. APCA maps perceptual contrast to the exact typographic combinations your design can safely use.

Color pair

Text color

oklch(0.19 0.004 107)

Background

oklch(1.00 0.000 90)

The quick brown fox jumps over the lazy dog.

Presets

Contrast value

Lc +103.2dark on light

Lc 90 Preferred

Columns of body text. Fluent reading.

Lc 75 Min body

The floor for body text readability.

Lc 60 Content

Sub-headings, captions, UI labels.

Lc 45 Large

Headlines, display type.

Lc 30 Minimum

Spot text, copyright, placeholder.

Lc 15 Non-text

Dividers, disabled states, decorative.

Font size / weight matrix

Every cell shows whether this size + weight combination is safe at the current Lc. Numbers in gray cells show the minimum size needed. Based on the APCA font lookup table (ref: Helvetica).

size	100	200	300	400	500	600	700	800	900
10px	41	26	19	15	15	14	13	16	18
11px	41	26	19	15	15	14	13	16	18
12px	41	26	19	15	15	14	13	16	18
14px	41	26	19	15	15	Aa	Aa	16	18
16px	41	26	19	Aa	Aa	Aa	Aa	Aa	18
18px	41	26	19	Aa	Aa	Aa	Aa	Aa	Aa
21px	41	26	Aa	Aa	Aa	Aa	Aa	Aa	Aa
24px	41	26	Aa	Aa	Aa	Aa	Aa	Aa	Aa
28px	41	Aa	Aa	Aa	Aa	Aa	Aa	Aa	Aa
32px	41	Aa	Aa	Aa	Aa	Aa	Aa	Aa	Aa
36px	41	Aa	Aa	Aa	Aa	Aa	Aa	Aa	Aa
42px	Aa	Aa	Aa	Aa	Aa	Aa	Aa	Aa	Aa
48px	Aa	Aa	Aa	Aa	Aa	Aa	Aa	Aa	Aa
60px	Aa	Aa	Aa	Aa	Aa	Aa	Aa	Aa	Aa
72px	Aa	Aa	Aa	Aa	Aa	Aa	Aa	Aa	Aa
96px	Aa	Aa	Aa	Aa	Aa	Aa	Aa	Aa	Aa

body safecontent textlarge text onlynumber = min size needed

Live preview

Safe combinations rendered at actual size and weight.

14px / 600 — The structure speaks.

16px / 400 — The structure speaks.

18px / 400 — The structure speaks.

24px / 400 — The structure speaks.

32px / 400 — The structure speaks.

48px / 400 — The structure speaks.

OKLCh gamut

Visualize where your colors sit within sRGB gamut in OKLCh space.

How APCA works

Not a ratio

WCAG 2.x uses luminance ratios (4.5:1). APCA computes perceptual lightness contrast (Lc) that accounts for how vision adapts to polarity. Same colors, different arrangement, different Lc.

Polarity-aware

Light text on dark needs higher Lc than dark on light for the same readability. APCA encodes this asymmetry. A ratio cannot.

Size + weight matter

A contrast value alone is incomplete. The APCA font lookup table maps Lc to exact size/weight minimums — not just "normal" and "large."