Another UA Screws Up

After the launch of one of our web sites, we had a number of clients complain that the contact form was difficult to read. That came as a bit of a shock, because we’d tested it in everything we could think of. I’d even installed a copy of Netscape 4 for the occasion. Nevertheless, whatever we did resulted in half of our “white on black” form elements having white text on a pale yellow background.

One of of the clients with the problem brought in their laptop to show us what was happening, and we spent a grand total of five minutes searching in vain for what was causing the problem. There was nothing hexadecimal, RGB or otherwise specifying that pale yellow background colour on our forms, so we took a different tact.

The conclusion was slightly anti-climatic and simple to fix, but the cause was the strange part: We isolated the problem to Google Toolbar and its form completion functionality. Whenever it offered to auto-complete a form for you, it would change the background colour of a form element to this sickly pale yellow colour, but leave the foreground colour whatever was specified in the style sheet. We’d found the source of our “white on yellow” forms.

After that, it was a simple matter of giving the background and foreground colours an !important declaration, which stopped the toolbar from changing the colours. Everything was fixed.

We would have been fine leaving the toolbar to change the colour scheme if it had done it properly. Nevertheless, this is an important lesson to everyone looking to dabble in accessibility: If you’re going to set one colour, set them all.