Brand color tokens fail WCAG contrast on CTAs and small labels

Summary

Shared PolicyEngine color tokens currently fail WCAG AA contrast in several production surfaces, especially white text on teal CTAs and small teal helper/label text on white.

Confirmed examples

• http://localhost:3000/us
  • primary CTA with white text on teal background
• http://localhost:3000/us/research
  • teal button styling
• http://localhost:3001/us/reports/create
  • small uppercase teal labels and muted helper text on white

Evidence

In the audit pass, Lighthouse measured the main teal/white pairing around 3.5:1, which is below the required 4.5:1 for normal text.

Relevant code

• packages/design-system/src/tokens/colors.ts
  • primary[500] = #319795
• dependent website and calculator CTA / label styling uses this shared token family

Expected

Default interactive colors and small-text tokens should meet WCAG AA where they are used for normal text.

Actual

The current token set is being reused in contexts where contrast is too low.

Suggested direction

• introduce an accessibility-safe action token for normal text/buttons
• reserve lighter brand tones for large display use only
• audit small text that uses teal or light gray tokens

Start with packages/design-system/src/tokens/colors.ts, then inspect the CTA and label surfaces at /us, /us/research, and /us/reports/create. Use the reported Lighthouse contrast result as a baseline and audit teal and light-gray token usage. Done means normal-text interactive and small-text colors meet WCAG AA contrast requirements.