Acknowledgement: Shared by Peter Bamuhigire, techguypeter.com.
-
Design with APCA, certify with WCAG — keep the two jobs separate. Use APCA (the
perceptual algorithm in the WCAG 3.0 draft) while tuning, because it tracks real legibility
across light and dark far better than the 2.x ratio, which over-passes light-on-dark and
can fail perfectly readable pairs. Then run the WCAG 2.2 ratio as the conformance gate —
it is what you legally and contractually certify against
(doctrine/references/wcag-2.2-criteria.md §Contrast method note). See references/apca-vs-wcag.md.
-
Apply the right threshold to each pair — these are floors, not targets. Body / small text
≥ 4.5:1; large text (≥ 24px, or ≥ 18.66px / 14pt bold) ≥ 3:1; meaningful UI components,
icons, borders that convey state, and focus rings ≥ 3:1 (WCAG 2.2 SC 1.4.3 and 1.4.11,
per doctrine/references/wcag-2.2-criteria.md). Aim past the floor (AAA is 7:1 / 4.5:1) so a
later tint tweak doesn't drop you below. Disabled controls are exempt from 1.4.3 — but exempt
is not invisible; keep them perceivable.
-
Measure every pair and record it — no eyeballing. Build the foreground×background matrix,
compute the ratio for each, mark PASS/FAIL against the threshold from step 2, and keep the
table as the contrast evidence (it ships with the palette). Any FAIL is rejected: retune the
ramp step (darken text, deepen the surface, raise chroma on the accent) and re-measure until
it passes. "It looks fine" is not a measurement. See examples/contrast-checked-palette.md.
-
Never encode meaning by hue alone — pair colour with a second cue. ~8% of men (and ~0.5%
of women) have a colour-vision deficiency, so red-vs-green status, "the blue line vs the green
line," or a red asterisk as the only signal fails them (WCAG 1.4.1 Use of Colour). Always
add a redundant non-colour cue: an icon (✓ ⚠ ✕ ℹ), a text label, a shape, a pattern/dash style,
or position. Colour becomes the accelerator, never the sole carrier. See
references/colorblind-safe-palettes.md.
-
Choose colour-blind-safe colours for anything that carries meaning. Status sets and data
series must stay distinguishable under deuteranopia, protanopia, and tritanopia. Separate hues
by more than hue — also by lightness and chroma — and avoid the classic traps: pure
red↔green, and teal↔grey / blue↔purple for tritanopes. Prefer a vetted safe ramp (Okabe–Ito,
IBM, Viridis for sequential) and simulate before shipping. references/colorblind-safe-palettes.md
gives ready ramps and the simulation step.
-
Treat dark mode as a second certification, not a freebie. Passing in light mode does not
imply passing in dark. Re-run APCA design + the WCAG gate (steps 1–3) on the dark roles
independently; accents usually need lightening and slight desaturation to hold 3:1 / 4.5:1 on
a near-dark surface. (Full dark-mode remapping lives in
02-color-brand-and-visual-identity/dark-mode-and-theming; the contrast proof lives here.)
-
Don't over-contrast either. #000 on #fff (≈ 21:1) vibrates and haloes — high ratio is
not the goal, legibility is. APCA flags this where the WCAG ratio cannot. Use a near-black
carrying a trace of brand hue on a slightly off-white surface; verify it still clears 4.5:1.
-
State the result and hand off. Output the certified pairs (with ratios), the non-colour
cue paired to each meaningful colour, the colour-blind-safe status/series set, and the
light + dark verdicts. Note the conformance level reached (AA / AAA per pair).
Read and colour calculation are required. Review defaults to read-only; editing requires remediation authority. Do not claim legal compliance beyond measured evidence and scope.
Without a trusted calculator or rendered states, provide a conditional matrix and manual test plan, marking ratios unverified. Without exact colours and contexts, stop the verdict.
