How accessible is dark mode for a person with astigmatism

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

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

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