White Rabbits In A Blizzard

Forms have a single raison d’être. They let a user input data on a website. That is their only function. They were not invented as playgrounds for designers who think that even the scrollbars need to fit a site’s corporate design.

Unfortunately some web designers still seem to think that their work isn’t done unless every textbox shines in a very special hue of some pastel on whose development they spent three hours of trial and error.

The same designers also seem to think that every browser will by default use Black as the text-color. And while they invest hours into developing that pastel hue for the background they simply leave the text color unattended.

Then along comes a user like me who spends countless hours in front of his screen, because he’s a developer, and like lots of other developers has a setup that minimizes glare.

In my case that setup includes Zenburn, a color scheme for text editors like my favourite Vim. And, being the typical Linux user, I have also pimped my desktop to match my preferences. The desktop theme is, you may have guessed, Clearlooks Zenburn.

Clearlooks Zenburn, among other things, changes the way textboxes and text entered into them look. In short, background is a very dark grey and text is a very light grey.

On websites that only style the dimensions and outlines of textboxes, and leave the colors alone, everything works fine. The same on websites that define background AND text colors. The theme does after all allow for websites to override colors.

Catastrophe strikes when a website defines a light background color for textboxes, but leaves the text color at browser defaults. In that case you may end up with #EFEFEF on #CFCFCF, which is like trying to spot white rabbits in a blizzard.

The instances of TinyMCE on WordPress admin pages are perfect examples of this. For me they only work if I override the site’s CSS.

Another nasty curve-ball comes from sites that expect browser defaults for textbox background to be White and hence don’t define a background color, but define a dark grayish text-color. For somebody with a dark desktop theme that’s like trying to spot a piece of coal in an unlit tunnel.

So, here’s a request coupled with a piece of advice.

If you feel that you must style every aspect of your form, do really style every aspect. Make sure that you have nicely contrasting color values for background AND text.

If in doubt, simply leave the colors alone completely so that the browser can use its default settings.

Coders with tired eyes will thank you for it.

Advertisements

About dozykraut

Proud member of Hillbilly's on Linux, promoting open source redneckism in remote parts of the Milky Way.
This entry was posted in Web and tagged , , , . Bookmark the permalink.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s