canon-color

CANON · Color and Contrast

Color is the second highest-leverage design decision after type. Most AI defaults are wrong: pure black, pure gray, purple gradients, low contrast on colored surfaces.

Quantified Rules

Contrast (WCAG 2.2)

Element	Minimum	Preferred	Source
Body text	4.5:1 (AA)	7:1 (AAA)	WCAG 1.4.3, 1.4.6
Large text (≥18.66px regular or ≥14px bold)	3:1 (AA)	4.5:1 (AAA)	WCAG 1.4.3
UI components, focus rings	3:1	4.5:1	WCAG 1.4.11
Disabled text	exempt	4.5:1	Treat as functional
Icons used for meaning	3:1	4.5:1	WCAG 1.4.11

Hard floor: never ship body text below 4.5:1. Test every text color against every surface it lands on.

Color Space

Use OKLCH for new palettes. Reasons:

• Perceptually uniform: equal lightness steps look equal
• Predictable hue rotation (HSL distorts)
• Wide-gamut (P3) ready
• Easy to generate accessible scales programmatically

:root {
  --primary-500: oklch(60% 0.18 250);
  --primary-600: oklch(54% 0.18 250);  /* same hue and chroma, lower L */
  --primary-700: oklch(48% 0.18 250);
}

Keep chroma constant within a hue ramp, vary only lightness. This produces tonal scales that read as the same color at different intensities.

Tinted Neutrals (never pure gray)

Layer	Pure (avoid)	Tinted (use)
Background	#ffffff	oklch(99% 0.005 250) (cool tint)
Surface	#f5f5f5	oklch(97% 0.008 250)
Border	#e5e5e5	oklch(92% 0.01 250)
Body text	#000000	oklch(20% 0.02 250)

Pure black (#000) and pure white (#fff) are visually harsh and read as unfinished. Tint every neutral toward your primary hue (or its complement) by 0.005–0.02 chroma. This unifies the palette and reads as intentional.

Semantic Token System

Every project needs these semantic layers, separated from raw color values:

:root {
  /* Raw scale: never reference directly in components */
  --gray-50:  oklch(98% 0.005 250);
  --gray-100: oklch(95% 0.008 250);
  --gray-900: oklch(20% 0.02 250);

  /* Semantic: reference these everywhere */
  --color-bg:           var(--gray-50);
  --color-surface:      var(--gray-100);
  --color-border:       var(--gray-200);
  --color-text:         var(--gray-900);
  --color-text-muted:   var(--gray-600);
  --color-text-subtle:  var(--gray-500);
  --color-accent:       var(--primary-500);
  --color-accent-hover: var(--primary-600);
}