4

Yes, I know that I shouldn't make links and text the same colour. But I am restricted by corporate guidelines. On the whole site, I am only allowed to use the company's shade of blue with a few variations in lightness, and shades of pure grey. I am also allowed the use of a very saturated orange as an "accent colour".

The schema restriction can still be worked with. But there is another restriction I am struggling hard with. I am allowed only one font: Verdana. Which looks funny at midsizes already, and becomes terrible at large sizes. So I kept body text at Verdana 16 pt and labels/headings at Verdana 16pt in blue.

Now I came upon some links, which also need styling. I gave the unvisited ones the pure deep blue of the company, and bent the rules to give the visited ones a bit less saturation. Still, they are coloured a bit similar to the headings.

enter image description here

"In other databases" and "Citations" are headings, "MGI Human-Mouse disease Connection" is unvisited, and the link below it is visited.

An alternative I tried was the accent orange for unvisited and grey for visited, both underlined. enter image description here

But the orange being so bright, this is really the first thing which pulls attention on the blue-grey page, and we really don't want this. These links are neither the most valuable things to the user, nor something we want to emphasize from an SEO perspective, they are, as you see, "further information" links pointing to other sites, not ours.

I also don't want to switch to a grey links scheme, because this is a data-heavy site, and wherever there are missing data, I output the word "unknown" in grey so that the actual information stands out from the clutter of fillwords.

So, any ideas how to make sure the users won't mistake the headings for links, while satisfying the corporate design constraints? Or do you think my current blue solution is distinct enough with its underlining and slight colour variations?

  • can you use bold? – Vincent Jun 4 '14 at 11:31
  • I agree with Janus' first suggestion, but would adjust by making visited links grey as here: jsfiddle.net/5ry3D/1 – Shawn Taylor Jun 4 '14 at 22:10
  • Those are ridiculous style guidelines if you can't properly differentiate between links and text. Note that there's plenty of usability and accessibility arguments to break away from that restrictive guide. – DA01 Jun 4 '14 at 22:28
4

Are you not allowed to use bold text?

Given the restrictions you are working under, I would probably use the darkest shade of blue for the headers, the medium shade for the unvisited links, and the lightest shade for the visited links. If possible, I would also make the headers bold. That would give you something like this (guesstimating the colour values a bit):

Blue-only scheme

 

Even if you are not allowed to use bold, I still think this gives a clearer view of the structure on the page:

Blue-only scheme, no bold

 

I agree that the orange colour is quite, erm, catchy to the eye; so if I were to use it at all, I would use it for the headers, not the links—bolded, if possible:

Orange-blue scheme

 

(JSFiddle used for examples)

  • Also, Verdana in 16pt. is huge. The screenshots above (and the JSFiddle) have it in 12pt., and as you can see, that is already a good deal bigger than the text on this site. 10pt. or 11pt. is usually the sweet spot for on-screen Verdana usage (IMHO). – Janus Bahs Jacquet Jun 4 '14 at 13:50

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.