Add contrast to the dark mode colors and improve accessibility

geerlingguy / jeffgeerling-com

Drupal Codebase for JeffGeerling.com

https://www.jeffgeerling.com

GNU General Public License v2.0

40 stars 2 forks source link

Add contrast to the dark mode colors and improve accessibility #36

Closed geerlingguy closed 4 years ago

geerlingguy commented 4 years ago

Contrast is too little. Also, unless the background is pure black, OLED displays don't get to shut their pixels all the way off. Black is best for backgrounds, easier to red and more power friendly.

After tweaking things, run through How to do an accessibility review?

geerlingguy commented 4 years ago

[ ] Outline color for elements; make slightly more contrasty (in dark mode).

geerlingguy commented 4 years ago

^^ This happened in Chrome during the live stream. Apparently it was due to hardware acceleration being turned on in Chrome, and Chrome not being super happy about it. See: https://twitter.com/geerlingguy/status/1257714544044052488

Very strange that it only affected certain pages, like my website, and the web inspector!

geerlingguy commented 4 years ago

Also, I was going to override the focus color in my CSS, but realized just leaving the default should be good—apparently it's set on the browser level. Here's Safari, light mode:

Safari, dark mode:

Chrome, dark mode:

I couldn't figure out how to get focus / tab focus going in FireFox, so 🤷‍♂️

geerlingguy commented 4 years ago

Merged PR, we're all done!