Specify a text colour for img elements

When an image specified with an img element is missing from a web page, some browsers display the alt text instead. Why not all browsers do that is a separate topic which I talk a bit about in Safari, WebKit and alt text for missing images.

I think most people will agree that it is a good thing for web browsers to display the contents of an image’s alt attribute when the image is missing or broken, or image rendering has been disabled. However, many web professionals forget to check what the alternative text will actually look like in those cases.

When alt text is displayed, its colour is inherited from its ancestor elements. Depending on which text colour is set and which background colour the image is displayed over, this can sometimes lead to unreadable or invisible alt text. Imagine for example a page that uses black text on a white background except for the header, which has a black background and contains a logo image with white text. If images cannot be displayed, the alt text will be rendered in black on a black background.

The fix is easy—all you need to do is use the color property to specify a text colour for the affected img elements. If you want to go even further you can also specify a background colour and a font size. For the white logo in a black header scenario, something like this could be a good start:

#header img {
	color:#fff;
}

This post is a Quick Tip. Background info is available in Quick Tips for web developers and web designers.

Posted on February 11, 2010 in CSS, Usability, Accessibility