Light color fonts in inputs

February 20th, 2006. Tagged: Usability

I've noticed some bloggers redesigned their sites using very dark backgrounds and the results are often very cool. The thing is that the forms also have dark backgrounds and, in order to be readable, light colour fonts.

The problem I saw is that form auto-fillers such as the Google toolbar, paint the fields they think they know about in some shade of yellow. As a result, white font on yellow background is next to unreadable.

Dustin Diaz's blog was recently redisigned.

Diaz's form
The form with the tooltip from the offending auto-fill thing.
Diaz's form completed
What's my email?

Also Marco has done a great job redesigning his site. In his case the font is a shade of gray, so the text is more readable, but still not too contrast.
Marco's comment form

How to resolve the issue? Trying to find a one-colour-fits-all-auti-fillers may be hard, but maybe trying to keep the form fields' background as light as possible is a safer way to go.

Tell your friends about this post: Facebook, Twitter, Google+

7 Responses

  1. To be honest I feel this wasn’t my fault really but it’s this autofiller-thing’s fault. If it wants to color the background yellow that’s fine with me but… it should make the text dark as well then ;) This would be my advice to the creators of this tool.

    It’s kinda weird to not be able to ‘go dark’ anymore just because of such a tool in my humble opinion.

  2. Ah. I’m glad I found this in my referrers list. I do indeed know a way around this and I’ll be implementing it as soon as possible. Thanks :)

  3. @Marco – yep, you’re right, changing the foreground colour when changing the background seems like the proper thing to do on the auto-fill’s part.

    @Dustin – glad I could help, looking forward to your solution!

    @both of you guys – great job on your redesigns!

  4. [...] .

    Form auto-fill toolbars and the colors of the inputs

    I recently posted about those auto-fill utilities, like the one found in the Google toolbar. The [...]

  5. Hey guys

    My site is also a light-on-dark site and I’ve found away around this issue. When providing a background color for an input (even an autofill applicable input), FF displays the background color fine, whilst IE insists on using the cream that Google dictates an autofill input must be.

    Workaround: CSS: use a 1px background image for the input. Make a gif 1px X 1px with the color that you want your inputs to be and use CSS to style that input:

    input {
    background: #ff0000 url(images/input.gif);

    sorted :)

  6. Oh, nice, my solution is much more complicated :D


  7. that also works :

Leave a Reply