How accessible is dark mode for a person with astigmatism

A presentation at GDG Glasgow in May 2022 in by Fransy Castillo

Slide 1

Slide 1

How accessible is dark mode for a person with astigmatism @fransyrcc

Slide 2

Slide 2

Fransy Castillo Senior Front End Developer at Limesharp

Slide 3

Slide 3

Dark mode

Slide 4

Slide 4

Dark mode Credits: By Marcin Wichary from San Francisco, Calif. - Flickr, CC BY 2.0P. Lujan / Flickr / CC BY-ND 2.0

Slide 5

Slide 5

Dark mode WYSIWYG word processors

Slide 6

Slide 6

Dark mode Eco-Branding Design Sylvain Boyer

Slide 7

Slide 7

Dark mode

Slide 8

Slide 8

Dark mode

Slide 9

Slide 9

Why dark mode?

Slide 10

Slide 10

Why dark mode?

Slide 11

Slide 11

What is astigmatism?

Slide 12

Slide 12

What is astigmatism? Eye condition About one in three people has some degree of astigmatism

Slide 13

Slide 13

What is astigmatism? Eye condition About one in three people has some degree of astigmatism By BruceBlaus - Own work, CC BY-SA 4.0,

Slide 14

Slide 14

Astigmatism symptoms Things are blurry Eye strain Headaches Difficulty with night vision By The original uploader was Tallfred at English Wikipedia. - Originally from en.wikipedia; description page is/was here., BSD, https://commons.wikimedia.org/w/index.php?curid=3098293

Slide 15

Slide 15

What astigmatic people see? Glaring lights, halos… Verywell Health’s Article about living with astigmatism By P. Lujan / Flickr / CC BY-ND 2.0

Slide 16

Slide 16

What happens to some people with astigmatism using a dark mode?

Slide 17

Slide 17

What happens to some people with astigmatism using a dark mode? Sometimes when using a dark mode… Halation Effect

Slide 18

Slide 18

What happens to some people with astigmatism using a dark mode? Sometimes when using a dark mode… Halation Effect

Slide 19

Slide 19

Who is the winner?

Slide 20

Slide 20

What’s next and what can we do? Give Options

Slide 21

Slide 21

Dark Mode vs Light Mode Options

Slide 22

Slide 22

Dark vs Light Mode Options General Settings macOS

Slide 23

Slide 23

Dark vs Light Mode Options iOS

Slide 24

Slide 24

Dark vs Light Mode Options Application 1 Toggle 1 Material Design

Slide 25

Slide 25

Dark vs Light Mode Options Website (documentation) 1 Toggle Vue.js 1

Slide 26

Slide 26

Dark vs Light Mode Options Code editor Dark mode: 3465 Light mode: 958 Visual Studio Code

Slide 27

Slide 27

More Options Angular Material

Slide 28

Slide 28

More Options Dark theme On/Off System Settings Google Search

Slide 29

Slide 29

How to implement these options in our websites?

Slide 30

Slide 30

Define Colour Schemes and Themes Vitesse public template by Anthony Fu (github: @antfu)

Slide 31

Slide 31

Define Colour Schemes and Themes Tailwind CSS CSS Variables

Slide 32

Slide 32

Check colour contrast ratio Contrast Checker W3C Web Accessibility Initiative(WAI) Large text 14pt bold 18pt regular 3:1 against the background Small text 4.5:1 against the background https://webaim.org/

Slide 33

Slide 33

Figma and Plugins Material theme Builder Dynamic colour Material 3 https://www.figma.com/community/plugin/1034969338659738588/Material-Theme-Builder

Slide 34

Slide 34

Figma and Material Material theme Builder https://www.figma.com/community/plugin/1034969338659738588/Material-Theme-Builder

Slide 35

Slide 35

A tip for all of us… 20-20-20 rule

Slide 36

Slide 36

Slide 37

Slide 37

Q&A Thank you! @fransyrcc