Accessible by Law! Generating Colors with JS and CSS Custom Properties
summary
Norway’s accessibility law motivates a live system that lets organizations pick any brand color while guaranteeing WCAG contrast by computing variants once in JavaScript and writing them as CSS variables. It uses CSS custom properties and the color.js/npm package to test 4.5:1 contrast, mix toward black for darker variants, and rotate hue for secondary colors. The result is a theme component that sets variables at runtime, adds a conditional border when needed, and updates the UI instantly.
AI-written summary · about
chapters (10)
- 0:00Websites illegal in Norway
- 3:39Colors for video calling
- 8:58WCAG contrast rules
- 11:09CSS custom properties for theming
- 13:16Darker colors for accessibility
- 16:49Conditional borders for contrast
- 18:10Secondary brand colors mathematically
- 21:38Dynamic theme engine
- 24:10Live demo of color system
- 25:55Accessibility is team effort
related talks
15mAccessible by law! Generating colors with JS and CSS Custom Properties
19mWhen colour theory meets technology
36mThe Magic of Color
06mDesign Accessibly: Color Contrast Tips and Tools
43mRethinking Colors in Design Systems: A CSS Approach to Idiomatic Design
46mResponsive Color
28mThe Colorful Future of CSS
37mCSS Custom Properties