Take the 2-minute tour ×
User Experience Stack Exchange is a question and answer site for user experience researchers and experts. It's 100% free, no registration required.

I'm not a web designer and would like to know about link and button colors.

About links

Should all links be the same color, knowing that sometimes the background has different color so the links are not visible enough? How do you handle this?

Is it ok to have 2 or 3 different colors for links?

About buttons

I have pretty much the same problem for buttons. Do I need to have like 5 or 6 predefined colors for buttons and deal with it on the entire website?

Right now I have a CSS file that look pretty much like this with about 10 different buttons:

login-button {
    background-color:blue;
    /***/
}
register-button {
    background-color:red;
    /***/
}
upload-button {
    background-color:green;
    /***/
}
add-instrument-button {
    background-color:orange;
    /***/
}
/*
more buttons..
*/

Would it be better to have something like this:

blue-button{}
green-button{}
orange-button{}
orange-dark-button{}

So I can reuse for eg: .blue-button for different actions. How do you guys do this?

share|improve this question
add comment

2 Answers 2

About links

Here a fine article about consistency :

http://www.uxbooth.com/articles/consistency-key-to-a-better-user-experience/

A few lines

The design of your site should also be consistent. Users remember the details, whether consciously or not. For example, users will associate a particular color on your website as the “link color,” they’ll come to recognize the typeface of your body copy, etc. Therefore, being consistent in these areas will not only contribute to a great-looking design, but it’ll also provide a more familiar experience for users.

You should change the background color to make the links readable not the other way around.

Do not forget to change the appearance (read color) according to the state (visited or not).

You can also read this :

Should hyperlinks be blue?

Especially this part

internal consistency is [...] important, so don't feel like you need to stick to the blue/purple/red palette. It's also vital that your links are differentiated from normal text. Differentiation is usually accomplished by color, weight, or an underline. Different colors for different link states increases usability.

About buttons

The color of a button should depend on its state and its purpose. All the difficulty is to understand what is common between the buttons and choose the colors wisely.

I should not advise that but sincerely you should start with three type of colors : pale grey or white for secondary actions, blue or something that matches your website graphic charter for primarily actions and a very contrasted color for call to actions (if needed).

share|improve this answer
1  
Thank you for the very complete answer. I have read the first article you provide which gave me some good advices and about to read the second. +1 –  Lorenzo Jul 11 at 9:12
    
+1 for making the answer I wanted to write, but you beat me to it :-) –  Benny Skogberg Jul 11 at 9:24
    
I think if a site has a clear two-tone UI, then you can be consistent within the two areas. This comes into play all the time with a hero in the header and dry content after. Making the whole site the same color, in this case, is not the answer. –  Imperative Jul 17 at 21:08
add comment

For link colours:

  • You should at least be consistent (stick to one colour).

  • I would say you should also leverage the user's existing knowledge of what a link in text will look like, and follow the existing convention (although if you have a really strong design concept that this will clash with, the "following convention" rule is not set in stone).

For the button colours:

  • It isn't a good idea to rely on colour alone. Many people see colour differently (e.g. red/green colourblindness).
  • Distinct shapes / icons will make it easier for users to distinguish what different types of buttons do. You can have a plus (+) icon for add, an up arrow for upload, etc. I would organise your buttons into functional categories, and make buttons that do similar things look similar.
share|improve this answer
    
Icon inside button is a good advice. Thank you –  Lorenzo Jul 11 at 9:14
1  
Consistent text link colors (unvisited, visited, active, etc.) are required across the site. Pick something that stands out not only from the all the backgrounds, but also from surrounding text. Use multiple methods (color and decoration such as underline, for example) for redundancy for people with color vision deficiencies. Whether you want to use the same, or a similar scheme, for buttons is up to you, but follow the same general rules. An icon is a good idea, but you should probably stick to a Unicode-defined character rather than an image. –  Phil Perry Jul 11 at 15:38
add comment

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

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