11

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?

Improve this question
1
  • This isn't a programming site but, since you've put some specific CSS here ... CSS class names should be semantic. In other words, the names should describe the item, not it's specific style. For that reason, names like "login-button", "register-button" are good; names like "blue-button", "green-button" are bad -- they tell you nothing about the item. Consider also that you may want to adjust styles over time as your web site evolves. Maybe blue isn't an appropriate colour for you login button anymore. If you login button has class blue-button, you have much more work to change it.
    – Bill Dagg
    Jul 23, 2014 at 15:56

2 Answers 2

Reset to default
14

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).

Improve this answer
3
  • 2
    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
    – Merlin
    Jul 11, 2014 at 9:12
  • +1 for making the answer I wanted to write, but you beat me to it :-)
    – Benny Skogberg
    Jul 11, 2014 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, 2014 at 21:08
2

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.
Improve this answer
1
  • 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, 2014 at 15:38

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

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