: How to distinguish between links and headings without colour variation? Yes, I know that I shouldn't make links and text the same colour. But I am restricted by corporate guidelines. On the
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.
"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.
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?
More posts by @Holmes874
1 Comments
Sorted by latest first Latest Oldest Best
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):
Even if you are not allowed to use bold, I still think this gives a clearer view of the structure on the page:
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:
(JSFiddle used for examples)
Terms of Use Create Support ticket Your support tickets Stock Market News! © vmapp.org2024 All Rights reserved.