Following Jakob Nielsen's Alertbox Top Ten Web Design Mistakes of 2005, in which the top complaint was illegible text…
About two-thirds of the voters complained about small font sizes or frozen font sizes; about one-third complained about low contrast between text and background.while the first two recommendations for the second biggest complaint — non-standard links — were
I've updated an earlier post to reflect the user CSS that I'm currently using in Firefox.
- Make obvious what's clickable: for text links, use colored, underlined text (and don't underline non-link text).
- Differentiate visited and unvisited links.
Using this, along with the preference setting for a minimum font size, achieves the following things:
- All text is black on a white background, never smaller than 12px.
- All links are underlined (I had to disagree with using coloured links - I think it looks bad and underlining is otherwise used so rarely that it's reasonable to assume underlined text is a link).
- Links change colour to blue on mouseover.
- Visited links have a light grey background, which is enough to distinguish them without damaging the style of the page.
This can make pages with coloured backgrounds look a bit patchy, and anti-aliased images with transparent backgrounds that are used as links can also look bad, but I think this is a reasonable price to pay for the huge improvement in legibility.
One thing I'd like to see is a CSS attribute for setting the colour of the text-underline. Having a link underlined in grey, changing to black on hover, is a nice, unobtrusive way of highlighting links, but at the moment sites are forced to use a border-bottom hack to emulate this (which obviously conflicts with the forced underlining of links, so had to be disabled, and also makes Firefox gives image links an unwanted underline).