Bipolar Semantic Tints & WCAG 4.5:1

In multi-theme design systems, semantic tokens (Danger Red, Success Green, Warning Amber, Info Blue) require adaptive mathematical blending across light and dark modes.

The Inversion Trap of Light Tints in Dark Mode

Traditional component libraries pair soft tints (-light-9, like #fef0f0) with saturated text in light mode. When transitioning to dark mode:

• Tints copied from light palettes paint as blinding white blocks over dark canvases.
• Saturated hues over dark surfaces collapse contrast to as low as 2.08:1—failing the WCAG 2.1 AA 4.5:1 minimum legibility threshold.

The color-mix Ink Fusion Formula

TuffEx solves this mathematically: Semantic text inks never use raw hues directly; they blend with primary ink (--tx-text-color-primary) in sRGB space:

// TuffEx Contrast Conservation Formula
color: color-mix(
  in srgb, 
  var(--tx-color-danger, #f56c6c) 55%, 
  var(--tx-text-color-primary, #303133)
);

• In light mode, primary ink is near-black, pulling semantic text darker for crisp contrast against soft tints.
• In dark mode, primary ink is near-white, pulling semantic text brighter for luminous readability against deep carbon.

Verified WCAG 2.1 4.5:1 Contrast Table

Empirical measurements conducted on 13px text:

Why Color Alone Must Never Convey State

Over 8% of male users experience color vision deficiencies (protanopia, deuteranopia). Iron Rule: Never use hue as the sole conveyor of status. Always accompany colored badges with distinct glyphs and accessible text labels (e.g. red cross icon plus explicit "Failed" text).