Mastering Dynamic UI Theming for Designers at Bites & Bytes

In this talk, I explain an essential new principle for generating dynamic UI themes on the fly. The key lies in the color transformations made possible by the new OKLCH color space, and I use my latest APCA Contrast Figma plugin, Polychrom, to demonstrate how it works.

Transcript

1. Dynamic UI
 Theming Mastering for designers Not Readable Aa 38 0 106 Polychrom le 0 108 0 0 62% 0.22 259 om Not Readable Aa 18 0 100% 0 0 62% Polychrom Non-Text Aa 34 0 108 100% 0 0 62% 0.22 259 Polychrom Aa 75 0 108 100% 0 0 59% 0.22 262.6 #BitesAndBytesLisbon
2. What are F i f t y S h ade s of Grey?
3. A typical UI
5. Colors can be challenging
6. Body Text Rg 18px Bd 14px Aa 75 0 108 100% 0 0 59% 0.22 262.6 Polychrom Non-Text Aa 34 0 108 100% 0 0 62% 0.22 259 Polychrom Not Readable Aa 18 0 106 100% 0 0 62% 0.22 259 Polychrom Invisible Aa 0 0 108 100% 0 0 62% 0.22 259 Polychrom Demo
7. UI reflects user selection TASK 75 Initial
 colors UI Approach Aa
8. Show initial colors as is Approach 1 75 Aa Initial
 colors UI No change No change
9. It works good... right? Approach 1 Test Aa 75 Aa 46 Aa 35 Aa 18
10. Actually it doesn’t! Approach 1 Test 75 Selecting
 white text
 on a white BG
 leads to an
 unusable UI
11. Contrast
 matters! User interfaces
 must be accessible
12. We need enough contrast between text and BG in UI THe problem 9 Aa It’s hard to read
 the number in this UI ?
13. Transforminitial colors... Approach 2 70 Aa Initial
 colors UI Darker Lighter
14. Transform initial colors to ensure enough contrast Approach 2 Aa 70
15. Yeah... but how?
16. Is there an easy way
 to transform colors? Approach 2 HEX RGB # B 2 7 F C 5 178,127,197
17. Perceptual
 uniformity P3 gamut OKLCH color model at a glance Chroma Dull—vivid Hue Red, yellow, etc Lightness Dark—bright
18. Learn more OKLCH
19. L for Lightness OKLCH 80% 60% 40% Lightness +20 = lighten -20 = darken
20. Darken a color Transformation 30% 60%
21. Lighten a color Transformation 85% 68%
23. Transform initial colors to ensure enough contrast Approach 2 Aa 70
24. Now it works... right? Approach 2 Test Aa 102 Aa 72 Aa 90 Aa 65
25. Right! Approach 2 produces sufficient contrast Approach 2 Test 100
26. 46 72 Better contrast Approach 1 VS 2 75 102 18 65 35 90
27. Convert to OKLCH Transform colors Ensure a11y in UI Body Text Rg 18px Bd 14px Aa 75 0 108 100% 0 0 59% 0.22 262.6 Polychrom Non-Text Aa 34 0 108 100% 0 0 62% 0.22 259 Polychrom Not Readable Aa 18 0 106 100% 0 0 62% 0.22 259 Polychrom Invisible Aa 0 0 108 100% 0 0 62% 0.22 259 Polychrom
28. Are you
 crazy?
29. Why?
30. Tweet your questions to #bitesandbyteslisbon The best question wins some gifts... Award at the afterparty
31. oklch.com
32. Polychrom