Skip to content

Contrast measurements

WCAG 2.1 contrast ratios for Konpeki tokens against --color-bg (#0A0E1A). Computed via the standard sRGB relative-luminance formula. Source of truth for the accessibility floor of the palette.

TokenHexRatio vs --color-bgAA body text (4.5:1)AA UI / large (3:1)
--color-text#E8E4D814.4:1passpass
--color-text-muted#9AA3B57.21:1passpass
--color-text-subtle#5B64783.10:1failpass
--color-accent#C9A9618.71:1passpass
--color-accent-hover#D4AF379.62:1passpass
--color-lcd-cyan#7FE5DB13.50:1passpass
--color-lcd-mint#A8E6CF12.40:1passpass
--color-rust#D9603C5.16:1passpass
--color-rust-deep#9A3A1F3.30:1failpass
  • --color-text-subtle is disabled-only / decorative-only. It MUST NOT be used for body text, interactive labels, helper text the visitor needs to read, or error messages. Its 3.1:1 ratio passes the 3:1 floor for UI components and large text only. Components that need a faint tertiary tone should prefer --color-text-muted (7.21:1) which already reads as quiet.
  • --color-rust was bumped from #B04A2F (2.89:1, AA-failing) to #D9603C (5.16:1) so error copy passes WCAG AA. The historical value is recorded in the token comment and AESTHETIC.md table.
  • --color-rust-deep is reserved for the background of a destructive button or pressed state — never used as a foreground colour against the page bg — so its 3.3:1 ratio is acceptable.

Numbers re-derived in code: pick the four corner cases (text, text-muted, text-subtle, rust) when palette tokens move and re-check. There is no automated test for this; the canonical reference is this file.