How accessible is dark mode for a person with astigmatism @fransyrcc
A presentation at GDG Glasgow in May 2022 in by Fransy Castillo
How accessible is dark mode for a person with astigmatism @fransyrcc
Fransy Castillo Senior Front End Developer at Limesharp
Dark mode
Dark mode Credits: By Marcin Wichary from San Francisco, Calif. - Flickr, CC BY 2.0P. Lujan / Flickr / CC BY-ND 2.0
Dark mode WYSIWYG word processors
Dark mode Eco-Branding Design Sylvain Boyer
Dark mode
Dark mode
Why dark mode?
Why dark mode?
What is astigmatism?
What is astigmatism? Eye condition About one in three people has some degree of astigmatism
What is astigmatism? Eye condition About one in three people has some degree of astigmatism By BruceBlaus - Own work, CC BY-SA 4.0,
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
What astigmatic people see? Glaring lights, halos… Verywell Health’s Article about living with astigmatism By P. Lujan / Flickr / CC BY-ND 2.0
What happens to some people with astigmatism using a dark mode?
What happens to some people with astigmatism using a dark mode? Sometimes when using a dark mode… Halation Effect
What happens to some people with astigmatism using a dark mode? Sometimes when using a dark mode… Halation Effect
Who is the winner?
What’s next and what can we do? Give Options
Dark Mode vs Light Mode Options
Dark vs Light Mode Options General Settings macOS
Dark vs Light Mode Options iOS
Dark vs Light Mode Options Application 1 Toggle 1 Material Design
Dark vs Light Mode Options Website (documentation) 1 Toggle Vue.js 1
Dark vs Light Mode Options Code editor Dark mode: 3465 Light mode: 958 Visual Studio Code
More Options Angular Material
More Options Dark theme On/Off System Settings Google Search
How to implement these options in our websites?
Define Colour Schemes and Themes Vitesse public template by Anthony Fu (github: @antfu)
Define Colour Schemes and Themes Tailwind CSS CSS Variables
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/
Figma and Plugins Material theme Builder Dynamic colour Material 3 https://www.figma.com/community/plugin/1034969338659738588/Material-Theme-Builder
Figma and Material Material theme Builder https://www.figma.com/community/plugin/1034969338659738588/Material-Theme-Builder
A tip for all of us… 20-20-20 rule
Q&A Thank you! @fransyrcc
