Hot answers tagged color
105
I am thinking of designing a website
that will have no color other than
black, gray, and white.
May I ask what the rationale is behind this decision? The reason I ask is because I don't think a pure B/G/W is suitable for most commercial designs, unless client's branding fits that scheme. So before you decide to go with this route, make sure your ...
42
Beyond just suggesting places like Adobe Kuler, ColourLovers, Color Scheme Designer, ColorMatch5K ColorJack, and ColorStream (iPhone app), you may benefit from learning about color theory and why and how colors should be combined and chosen. Here are some useful resources:
Worqx's Color Tutorials
Basic Color Theory
Smashing Magazine's 3-part series on
...
38
Just because your brand color is red doesn't make the use of red for errors obsolete, it's just a matter of extent.
Take the Viaplay signup form for example:
Viaplay has red as their main accent color, which is used throughout the website for actions buttons, icons, header, graphic elements etc.. however, in the form they do tone down the use. They ...
34
First things first, this is what it looks like to color blind (deuteranopia; by the most common form of colorblindness) users:
(also the zebrastripes are almost impossible to see, colorblind or not)
Red on green is a classically bad color combo, though your magenta text isn't entirely unreadable. The background color is very loud though which can be hard ...
32
The following screenshot is taken from the speech by Jon Wiley at UXweek 2011 (Original video). He explains the design decisions made by google in the past months.
Look towards the end (after minute 27) of the video to see it by yourself:
red is for "create something"
green is for "share something"
blue is for "do something" (e.g. submit a form)
Keep ...
29
I believe high contrast such as black on white can cause eye strain. Also there is evidence that it is particularly bad for people with dyslexia. For further info:
http://uxmovement.com/content/6-surprising-bad-practices-that-hurt-dyslexic-users/
http://www.dyslexiacentre.co.uk/dyslexia.htm
WCAG provide details on what is acceptable colour contrast, but ...
28
In and of themselves the colors are fine; I think it's the particular combination of colors that you are using. The red rgb(192, 55, 47) is at 46% luminance, and your eyes will adjust to that accordingly; but the white text is 100% luminance, which requires your eyes to adjust slightly. On bright enough monitors, it can actually be kind of jarring, although ...
22
In general, using only color to indicate information is bad for accessibility reasons. Red/green colorblindness is the most common and occurs in 8% of males. Using an icon, like an X or warning sign, is the best way to go.
If you must differentiate color for business reasons (i.e. people at the top think it should be a different color), then pick one that ...
21
Convention is nice when your color scheme allows it, but internal consistency is more 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 ...
20
There are no colours that shouldn't be used, but there are combinations that aren't helpful in terms of aesthetic and in ease of perception, or inappropriate use of colour that clashes with culturally accepted symbols.
Don't forget to check that the colour blind will not have difficulty with your UI, and that the use of colour to encode information is only ...
19
A standard, such as #0000FF for unvisited links and #800080 for visited links, is only good if nearly everyone does it. Otherwise users cannot anticipate when the standard will and won’t be followed and thus can no longer use it to predict site behavior. Unfortunately most web sites do not follow these color standards. In a haphazard survey (not to be ...
17
Darker color scheme are often used effectively in software that focuses heavily on visual content. For example Adobe Lightroom, Adobe After Effects, Microsoft Expression Blend, and Kaxaml are are interfaces that have a dark color theme. This allows the interface to fade into the background and let the content come alive
Why is it not widely used? I guess it ...
17
It sounds like an out-of-date concept. I think there were problems when the colours could not be rendered, because they were sometimes shown as speckled - a combination of colours, that appear correct in large swathes, but would not work at all for narrower items like borders.
Unless you are explicitly designing for very old computers, then I would not ...
17
It really depends on the nature of the equipment and the seriousness of the alert.
Does a high temperature mean that over ten years, this particular piece of equipment will fail to weigh out precisely 1.2 kilograms of potatoes, and instead perhaps will weigh out 1.21 kilograms of potatoes? In that case, I would say blinking red text is perhaps overkill.
...
17
Grey buttons can still be used, provided you can give enough indication that the button is indeed not disabled. You could have a darker font color, like this:
Even then, this approach is not recommended. Seconding Pasha's thoughts, such an attempt to make grey buttons seem "non-disabled" might still not be convincing to all users. Unless you're bent on ...
15
Blue is the most common Favorite Color, which has been backed up repeatedly.
(source)
In addition to being the most popular color, blue just works well. Backgrounds are often white or black, and blue works on both. Blue is a friendly color for most common forms of colorblindness as well, as it doesn't mix in with any other colors in red/green ...
15
This disparity is likely due to a variety of factors:
It's not clear exactly how many colors humans can see. For
example, the table at the top of this page about the number of
colors distinguishable by the human eye cites various academic
papers as saying anything from "more than 100,000" to "roughly 10
million." In any case, the number of colors visible ...
14
Legibility depends on high contrast between foreground and background, so black-and-white is the safest bet. See for example:
Hall RH & Hanna H 2003. The Impact of
Web Page Text-Background Color
Combinations on Readability,
Retention, Aesthetics, and Behavioral
Intention, Laboratory for
Information Technology Evaluation,
Technical Report ...
14
There are no rules, at least no hard and fast ones. Following research to the letter can result in making an ugly site--blue links work best, but blue links on a red background are hard to read! The research however can guide you to the "best practices" and your maintain your sense of good aesthetics so you know when to break from convention.
While there ...
14
On ColorMatters.com there is a question about Colors for Food Products: Logos and Packaging
One paragraph quoted below:
..blue is an appetite suppressant, although only in certain
concentrations and by volume of use. But a color like Purple Martin
used in a ratio of say 15-20% of total space with a dominant color
such as Golden Wheat, add maybe a ...
14
Reds, yellows and oranges are spotted swifter by the human eye, and multivariant testing typically confirms that call-to-action buttons get the most clicks when they're orange - and by a significant margin. Reds and yellow both do well; greens often come out poorest. Yellow possibly fares a little worse on the web because humans have a harder time resolving ...
14
Instead of using colors, draw visual emphasis through other means, such as using danger icons, font weight, and/or jagged outlines.
Here's a an example, excessively using all three of these cues:
EDIT: The comments below suggest that I didn't make it clear enough in my original post that using all three of these cues together would be excessive. (I'd ...
13
The main issue with colours now is to ensure they are Accessible. Web-Safe colours were more releated to hardware compatibility (monitors and such like) whereas now we are more concerned that the colours pass the required W3C Accessibility guidelines.
12
The most important difference seems to be the contrast between the key background and the letters. Note also that the font on the iPhone keyboard is bold while the iPad's is not.
The iPhone is much smaller and likely to be used outdoors so the extremely bright off-white shade of the keys makes sense. Black-on-White is ideal for outdoors, though the iPad's ...
12
Instead of saying one colour is better than another for your "add to cart" button, I suggest you carry out a multivariate test with different colour and text combinations. You'll soon discover which colour results in the most conversions. (This all assumes your website has enough traffic to conduct the tests in a sensible length of time).
11
Contrast ratio is far more important than the colours you use. The W3C are more concerned with contrast for achieving a AA rating for Accessibility. That's not only good practice for colour blindness but also for general usability.
A tool like the Colour Contrast Checker from snook.ca (screenshot below) is a handy quick reference tool to check such ratios:
...
11
I think red is pretty much the convention in this context so you should use red for errors that need to be fixed before you can move on/send the form. Yellow is in general for warnings (eg. user perhaps should/could improve something, but it does not stop from proceeding). Yellow can be used with for example with one of those password strength thingies where ...
11
Research generally suggests light on dark is harder to read in most cases but considering we're talking accessibility, you should know that results for those with normal vision don't necessarily hold true for those with various vision impairments.
I've heard higher contrast (the mode in Windows is called High Contrast mode I think) can be easier to read ...
11
Do not rely on hover state for affordance. Don't make it a puzzle for me to figure out what I can click on or not, just show me. Also, tablets and other touch centric devices don't have a hover state at all.
Grey buttons next to colored buttons of the same shape tell me that they're disabled and not available at this point. Greying out items that are ...
10
I believe this trend came together with the idea of separation of content and presentation. Icons are part of the chrome/ui and should not be too conspicuous in order not to compete with the content itself.
Another reason may be that it's easier to attract attention to an element when it is the only one with a colourful icon, and everything else is ...
Only top voted, non community-wiki answers of a minimum length are eligible
