2022: The Dark Side of the Web

Building a web-app that is accessible and respect your users preferences might be daunting. In this talk you will learn how to respect your users color scheme preferences in an accessible way.

Transcript

1. Welcome to the dark side Making dark mode for web accessible
2. Making dark mode accessible for web
4. i a.g.vanherwijnen
 l agvanherwijnen i Anne-Greeth z MinThaMie
5. Making dark mode accessible for web
6. https://css-tricks.com/poll-results-light-on-dark-is-preferred/
7. https://css-tricks.com/poll-results-light-on-dark-is-preferred/ 37% 63% https://css-tricks.com/poll-results-light-on-dark-is-preferred/
14. TODO: Add tailwind example
18. Media queries
19. @media
20. Media types all, print, screen
21. @media screen
22. Media features
23. Media features
24. @media screen and (prefers-color- scheme: dark) { // Insert your CSS here }
27. @media (prefers-color-scheme: dark) { }
28. @media (prefers-color-scheme: dark) { body { background-color: #1A1A2E; color: white; } }
29. @media (prefers-color-scheme: dark) { body { background-color: #1A1A2E; color: white; } a { color: #FBBF24; } }
30. @media (prefers-color-scheme: dark) { body { background-color: #1A1A2E; color: white; } a { color: #FBBF24; } .lttf-chart { background-color: #16213E; } }
31. @media (prefers-color-scheme: dark) { body { background-color: #1A1A2E; color: white; } a { color: #FBBF24; } .lttf-chart { background-color: #16213E; } .chart-container .axis { fill: white !important; } 
 }
32. :root { --background-color: beige; --text-color: black; --border-radius: 4px; } body { background-color: var(--background-color) color: var(--text-color) } @media screen and (prefers-color-scheme: dark) { :root { --background-color: #12121; --text-color: white; } }
33. :root { --background-color: beige; --text-color: black; --border-radius: 4px; } body { background-color: var(--background-color) color: var(--text-color) } @media screen and (prefers-color-scheme: dark) { :root { --background-color: #12121; --text-color: white; } }
34. :root { --background-color: beige; --text-color: black; --border-radius: 4px; } body { background-color: var(--background-color) color: var(--text-color) } @media screen and (prefers-color-scheme: dark) { :root { --background-color: #12121; --text-color: white; } }
35. :root { --border-radius: 4px; } body { background-color: var(--background-color) color: var(--text-color) } @media screen and (prefers-color-scheme: dark) { :root { --background-color: #12121; --text-color: white; } } @media screen and (prefers-color-scheme: light) { :root { --background-color: beige; --text-color: black; } }
36. TODO: Add tailwind example
39. dark:
41. 100 lines of code changed* * Actually 101 but 100 looked cooler on the slide :)
45. accessibility
46. a1cessibility
47. a2essibility
48. a3ssibility
49. a4sibility
50. a5ibility
51. a6bility
52. a7ility
53. a8lity
54. a9ity
55. a10ty
56. a11y
57. Colors
58. Color wheel zelf maken
60. Interactive version by Robert Allison on SAS Learning Post
61. https://enchroma.com/blogs/beyond-color/how-color-blind-see
62. Web Content Accessibility Guidelines WCAG
63. Contrast
65. Contrast ratios can range from 1 to 21 (commonly written 1:1 to 21:1). (L1 + 0.05) / (L2 + 0.05), whereby: • L1 is the relative luminance of the lighter of the colors, and • L2 is the relative luminance of the darker of the colors. L = 0.2126 * R + 0.7152 * G + 0.0722 * B where R, G and B are de fi ned as: • if R sRGB <= 0.03928 then R = R sRGB /12.92 else R = ((R sRGB +0.055)/1.055) ^ 2.4 • if G sRGB <= 0.03928 then G = G sRGB /12.92 else G = ((G sRGB +0.055)/1.055) ^ 2.4 • if B sRGB <= 0.03928 then B = B sRGB /12.92 else B = ((B sRGB +0.055)/1.055) ^ 2.4 and R sRGB , G sRGB , and B sRGB are de fi ned as: • R sRGB = R 8bit /255 • G sRGB = G 8bit /255 • B sRGB = B 8bit /255 https://medium.muz.li/the-science-of-color-contrast-an-expert-designers-guide-33e84c41d156
73. Developer tools
83. @media screen and (prefers-color-scheme: dark) { // Insert CSS here } @media screen and (prefers-color-scheme: light) { // Insert CSS here } z MinThaMie i a.g.vanherwijnen l agvanherwijnen
84. Resources • https://enchroma.com/blogs/beyond-color/how-color-blind- • https://a11y-automation.dev/ • https://github.com/mansona/lint-to-the-future • https://css-tricks.com/poll-results-light-on-dark-is-preferred/ • https://sashamaps.net/docs/resources/20-colors/ • https://webaim.org/resources/contrastchecker/ • https://developer.mozilla.org/en-US/docs/Web/CSS/@media/prefers-color- scheme • https://linktr.ee/Agathe.Badia