A presentation at GDG Glasgow 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
In a dark mode the system uses a dark colour palette. This mode has become more and more popular over time. It’s said it is quite beneficial because, in some screen types, it can reduce power usage. Also, it improves usability for users that are sensible to bright light or have low vision. However, this might not the case for all types of users with vision problems.
In this talk we will discuss why it is important to give options to people and web accessibility.
The following resources were mentioned during the presentation or are useful additional information.
Information about what astigmatism is, symptoms and causes.
A lab by Material Design to dive into the new dynamic colour features introduced with Material You.
User-generated color schemes integrate with Android apps that use the Material Design 3 color system.
Tips for dealing with glaring lights, halos, night driving, and more
Easy light is an opinionated Visual Studio Code light theme.
for free. You
can too.