Brand Palette

Toggles: WCAG↔APCA, #000↔#FFF text, Light↔Dark UI, Contrast On/Off, and **Key** visibility.

Metric:
Text:
Theme:
Contrast:
Key:
Contrast Key (what the badges mean)
AAA
WCAG: ratio ≥ 7.0 — Good for body text.
APCA: Lc ≥ 90 — Good for small body text. (WCAG 1.4.6, APCA explainer)
AA
WCAG: ratio ≥ 4.5 — Body text passes.
APCA: Lc ≥ 75 — Good for ~24px or bold. (WCAG 1.4.3)
AA Large
WCAG: ratio ≥ 3.0 — Large text only (≥24px normal or ≥18.66px bold).
APCA: Lc ≥ 60 — Large/bold text OK.
Fail
Below thresholds — change tone, text color, or size.

WCAG uses a luminance-based ratio (higher = more contrast). APCA uses a perceptual Lc value and is polarity‑aware. This tool compares your selected text color (#000 or #FFF) against each swatch. APCA here is an approximation; verify critical combos with the official APCA calculator.