Accessible by law! Generating colors with JS and CSS Custom Properties
summary
Norway requires accessible websites and the concrete requirement is WCAG contrast ratios (4.5:1 for normal text). The implementation uses the npm package color plus a sprinkle of JavaScript to compute luminance, rotate HSL for secondary hues, and expose results as CSS Custom Properties so styles read vars not hardcoded colors. A React theme component generates primary/secondary variants, flips text to black or white, adds a conditional border for very light backgrounds, and runs live in a demo.
AI-written summary · about
chapters (4)
related talks
28mAccessible by Law! Generating Colors with JS and CSS Custom Properties
19mWhen colour theory meets technology
46mResponsive Color
37mCSS Custom Properties
28mBuilding the Dark Mode of Your Dreams with Color Science
28mThe Colorful Future of CSS
06mDesign Accessibly: Color Contrast Tips and Tools
20mThe Dark Side of the Web