Color Choices on this Site
23 Sep 2015The other day I saw some discussion regarding which was easier to read: bright-on-dark versus dark-on-bright text. This is an accessibility issue. The vast majority of the web is dark-on-bright, which I suppose historically goes back to black ink on white paper. While looking at reflected light, like a book or magazine, I certainly find black-on-dark easier to read. But, on a screen I find light on dark is easier for my eyes.
I made this site easy for my eyes. That doesn’t mean it’s easy for everybody else’s eyes. I understand it might be unreadable to some, the same way that black-on-white text is unreadable to some. Black on white text is readable to me, but my eyes tire much more quickly with bright blaring backgrounds. If the color choices on this site are difficult or impossible to read for you, I apologize; Please scroll to the bottom of this page for how to invert colors on your iOS and OS X devices.
I’m unconvinced there’s a single clear correct answer for what to do design-wise. Yes, there are lots of articles on the web pointing toward one choice or the other. Yes, it looks to me like more of them point toward dark-on-bright, the option I do not prefer.
With infinite time and energy I’d implement an invert-colors option on this website, but my css skills just aren’t up to the task right now. And, if you’re reading this, that would only solve the issue for this one obscure, infrequently-read site. (I’m not even exactly sure how it would work. The more obvious a button you make, the more obtrusive it is to readers who don’t need to invert colors. The less obtrusive a button you make, the less likely it is that people who need it will find it. I’m sure it could be done, but it’s not obvious to me how to design it well.)
As someone who finds bright-on-dark easier in a world that is dominantly dark-on-bright, here’s how I use the accessibility features available on my devices to flip back-and-forth between inverted and non-inverted color maps. If you’re looking over my shoulder you will see me flip back-and-forth many times a day depending on the task at hand.
Invert colors on iOS
On iOS, go in to Settings → General → Accessibility and scroll all the way to the bottom to set the Accessibility Shortcut to Invert Colors. Now a triple click of the home button will invert the screen colors.
Invert colors on Mac OS X
On OS X, go in to System Preferences → Keyboard → Shortcuts → Accessibility and select the Invert Colors option. The default keyboard shortcut is ^⌥⌘8. That is one those key combos that looks complicated but is actually just mashing your fingers down on a bunch of the keyboard at once. Or, select your own keyboard shortcut.
Updated 2015-09-29 to add: I use BetterTouchTool to map a 4-fingered double click on my trackpad to ^⌥⌘8 to give me even quicker/easier access to inverting colors.