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

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