A presentation at EmberConf 2022 by Anne-Greeth van Herwijnen
Welcome to the dark side Making dark mode for web accessible
Making dark mode accessible for web
i a.g.vanherwijnen l agvanherwijnen i Anne-Greeth z MinThaMie
Making dark mode accessible for web
https://css-tricks.com/poll-results-light-on-dark-is-preferred/
37% 63% https://css-tricks.com/poll-results-light-on-dark-is-preferred/
TODO: Add tailwind example
Media queries
@media
Media types all, print, screen
@media screen
Media features
Media features
@media screen and (prefers-colorscheme: dark) { // Insert your CSS here }
@media (prefers-color-scheme: dark) { }
@media (prefers-color-scheme: dark) { body { background-color: #1A1A2E; color: white; } }
@media (prefers-color-scheme: dark) { body { background-color: #1A1A2E; color: white; } a { color: #FBBF24; } }
@media (prefers-color-scheme: dark) { body { background-color: #1A1A2E; color: white; } a { color: #FBBF24; } .lttf-chart { background-color: #16213E; } }
@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; } }
: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; } }
: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; } }
: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; } }
: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; } }
TODO: Add tailwind example
dark:
100 lines of code changed *
accessibility
a1cessibility
a2essibility
a3ssibility
a4sibility
a5ibility
a6bility
a7ility
a8lity
a9ity
a10ty
a11y
Colors
Color wheel zelf maken
Interactive version by Robert Allison on SAS Learning Post
https://enchroma.com/blogs/beyond-color/how-color-blind-see
Web Content Accessibility Guidelines WCAG
Contrast
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 ned as: • if R <= 0.03928 then R = R /12.92 else R = ((R +0.055)/1.055) ^ 2.4 sRGB sRGB sRGB • if G <= 0.03928 then G = G /12.92 else G = ((G +0.055)/1.055) ^ 2.4 sRGB sRGB sRGB • if B <= 0.03928 then B = B /12.92 else B = ((B +0.055)/1.055) ^ 2.4 sRGB sRGB sRGB and R , G , and B are de ned as: sRGB sRGB sRGB • R = R /255 sRGB 8bit • G = G /255 sRGB 8bit • B = B /255 8bit fi https://medium.muz.li/the-science-of-color-contrast-an-expert-designers-guide-33e84c41d156 fi sRGB
Developer tools
@media screen and (prefers-color-scheme: dark) { // Insert CSS here } @media screen and (prefers-color-scheme: light) { // Insert CSS here } i a.g.vanherwijnen l agvanherwijnen z MinThaMie
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-colorscheme • https://linktr.ee/Agathe.Badia
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.