Dark side of the web - making dark mode accessible for web

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 *
Actually 101 but 100 looked cooler on the slide :)

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

Anne-Greeth van Herwijnen
@minthamie

1 / 84

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.

Video