Back to portfolio

Foundations

Accessibility

Color-vision adaptation and font scaling live in the theme customizer (palette icon). Settings persist in localStorage and apply site-wide via data-color-vision and data-font-scale on <html>.

Color vision adaptation

Adaptation remaps semantic and chart tokens so multi-color UI stays distinguishable. Brand primary colors are preserved; charts, accents, and destructive states shift to safe hues.

  • NoneDefault theme colors
  • ProtanopiaRed–green safe palette
  • DeuteranopiaRed–green safe palette
  • TritanopiaBlue–yellow safe palette
  • AchromatopsiaHigh-contrast grayscale charts

Adapted tokens (live preview)

Toggle color vision in the theme customizer to see these tokens update.

Destructive

--destructive

Accent

--accent

Accent foreground

--accent-foreground

Ring

--ring

Chart 1

--chart-1

Chart 2

--chart-2

Chart 3

--chart-3

Chart 4

--chart-4

Chart 5

--chart-5

Font scaling

Font scale adjusts the root html font size via --font-scale, so all Tailwind rem-based text utilities grow proportionally.

100%

scale: 1

112%

scale: 1.12

125%

scale: 1.25

150%

scale: 1.5

Limitations

Fixed pixel values (for example some resume preview headings) do not respond to font scaling.

Resume brand colors are resolved as inline hex and are not remapped by color-vision CSS in this version.