Set both background and font colors, or neither

  • Date: January 31, 2019

Dear web developers,

First of all, thanks for taking time to set the background color for your web pages and form elements. The light grey or is so much more pleasant than the default glaring white color.

Though, that might be a problem for some users, especially those with a default dark theme on their systems. Let me demonstrate with some screenshots. I’ll pick on Facebook first:

Facebook form on dark theme

What about the Dropbox login form?

Dropbox login form on dark theme

Google dictionary?

Google dictionary form on dark theme

Twitter 2FA form?

Twitter 2FA form on dark theme

You get the idea. The cases I’ve shown here either set the background color without setting the text color, or vice versa.

So?

I understand that this is like one of those accessiblity things, where it wouldn’t matter to most of your traffic–and you’ve got much bigger fish to fry. Though hopefully this article would come up in your head the next time you type background-color or font-color in your CSS file. And if you have a few moments to spare, I propose one of thse three options:

  • Set the both the background color AND font color for your CSS selector, or
  • Don’t set the colors at all, let the browser use the system default color, or
  • Add yet another /* TODO */ in your codebase and call it a day. JK :-).