Closed. This question is opinion-based. It is not currently accepting answers.
Want to improve this question? Update the question so it can be answered with facts and citations by editing this post.
Closed 5 years ago.
Improve this question
What are the most user-friendly color combinations for Web 2.0 websites, such as background, button colors, etc.?
ColorSchemer will suggest good schemes for you.
If you want to try something out on your own, try Color Combinations.
I've been using this free color schemer to help me determine some nice layouts. You give it a base color and it will give you a lot of complements.
EDIT: Gah! Curse you jko and your god-like typing abilities! At least we have the same reference though. 8^D
For color schemes, I like browsing Colour Lovers. There are thousands of user-submitted color schemes to pick through for ideas and you can easily create your own scheme if you'd like. A lot of times I use it just for the color palette to create just the right color (it outputs the color in hex, RGB, HSV and CMYK).
These aren't combinations per-say but are good colours if you're just looking to mock something up (or if you're like me and have the colour sense of a bat).
Google Docs & Spreadsheets: Web 2.0 Colours - found this recently and it's been very helpful.
Modern Life is Rubbish: Web 2.0 Colour Palette - a sort of parody but useful :-)
As for when i do use actual palettes I use Colourlovers, kuler and Colourschemer with custom colours.
what about colllor ?
user-friendly color palette generator
My stick figures come out wrong, but the following links have kept me artistically aligned for many years:
Color tools for the design impaired
Color Scheme Generator
To web 2.0-ize it, just put a lens flare on your logo & mark it BETA - you'll be fine.
search for color on useit
search for color on boxesandarrows
There has been loads of research on this sort of stuff and most of it is conflicting a couple of good jump off points are listed above.
Generally lighter backgrounds and good contrast are favoured by all researchers but the details get niggly.
I would say that using the right combination of colors is user-friendly. Make sure your colors coordinate with each other and you should be fine.
A tool I use a lot is kuler (http://kuler.adobe.com). It'll help you pick colors that work well with each other.
Miles Burke has compiled a list of the colors used in the majority of the big names in this Web 2.0 world.
He also gives a PNG or a JPG as a color cheatsheet.
I am sure I can give you an idea from what color to chose for your application.
There is no single set of colours that everyone finds legible, but tools exist to formalise the variation and help you to make informed choices. Anyone doing UI should know about automated colour checking for accessibility. Anytime you have text that people need to read, pop the foreground and background colours into this;
Colour Contrast Check
This is based on a lot of research into contrast and legibility. If your colour combination is >125 and >500 you are as safe as you can be. Between 100 and 125 for brightness difference and 400 and 500 for colour difference then it's fine, but could be better. Below 100 and 400 respectively, increasing numbers of people will have trouble reading it for a variety of reasons.
Related
How do you choose your colour schemes for your applications and/or web designs?
Is it a gut instinct thing or can logic be applied here too? I have looked at some colour theory but my combinations seemed wrong.
I am looking at a monochrome webpage. Rather than pluck colours out of the air as usual I would like to see if there is a science behind this. Links and opinions welcome.
Kuler is a great utility for choosing color schemes that work in harmony.
I have someone else who lives and breathes color and design do it for me.
Most graphic designers make terrible programmers, and most programmers make terrible graphic designers. So I dodge the issue entirely.
To be totally honest, I usually rip off someone elses color scheme for my own personal stuff (for work stuff, hire a designer). I will grab the main color and complimentary color from a site I think looks nice, plug those into one of the hundreds of online color tools out there, and build out a pallet. Once I have the colors down, I will do a few subtle gradients in photoshop, and just sort of go from there.
Colourlovers: http://www.colourlovers.com/
Or just look around. Go around your town with a camera, take random pictures and pick colours. Good places are the fruit section of a market, park, etc.
Use the system defaults for applications. That's where the user sets THEIR preference, which you should honor.
It is a science and an art, and a big one. 61,000,000 results on google for "color design".
You might also be interested in:
http://en.wikipedia.org/wiki/Category:Graphic_design
http://en.wikipedia.org/wiki/Color_theory
Usually I'm told what to use.
If I'm not and have a logo or an image and use this Colors Palette Generator it lets you upload an image and then gives you a generated colour scheme.
If nether I borrow something from around the web.
I bought a designers/printers reference book that contains pre-defined sets of colours and tones. It includes the RGB values for the colours so I can put them directly into my apps.
The book contains sets such as "contemporary", "autumn", "winter", "cool modern".
Your public library should have a copy of the book Color Index which contains various color combinations which work harmoniously. Also, you could look into purchasing a Color Wheel from your local art supply store. It's not expensive, it lets you play with mono, complementary, triad and tetrad schemes. The Color Scheme Designer site is also very nice.
Another alternative is colorcombos.com, which can grab colors from any website. You can browse its library for different combinations or try to change them, then make yours.
Since the vast majority of monitors are 16-bit color or more, including mobile devices, does it make sense to even consider web-safe colors when choosing color schemes? Or is it something that ought to be relegated to history as a piece of trivia?
For those of you that don't know what web-safe colors are:
Another set of 216 color values is commonly considered to be the "web-safe" color palette, developed at a time when many computer
displays were only capable of
displaying 256 colors. A set of colors
was needed that could be shown without
dithering on 256-color displays; the
number 216 was chosen partly because
computer operating systems customarily
reserved sixteen to twenty colors for
their own use; it was also selected
because it allows exactly six shades
each of red, green, and blue (6 × 6 ×
6 = 216).
The list of colors is often presented
as if it has special properties that
render them immune to dithering. In
fact, on 256-color displays
applications can set a palette of any
selection of colors that they choose,
dithering the rest. These colors were
chosen specifically because they
matched the palettes selected by the
then leading browser applications. [Wikipedia]
For me web safe color palette is no longer primary concern. Optimize for the largest target audience.
According to w3schools site visitors:
In January 2009 1% of site visitors had 256 color displays, 95% of users had
24 or 32 bit.
[Update] In January 2015 0.5% had 256 colours, 0.5% had 24 bit and 99% had 32 bit
I found similar numbers from a business app site that I look after:
32-bit 79.01%
24-bit 15.64%
16-bit 5.27%
8-bit 0.08%
I don't think web safe colors are relevant any more. To me, a much bigger problem for smartphones are all the fixed-width 960-pixel wide web pages.
I think the most important thing when choosing a colour palette is keeping in mind colour-blindness. There are a few different types that I know of, but the main thing is making sure that you have enough contrast between colours.
For example green text on a red background might be easier for some to read, but very difficult or maybe impossible for others (5-10% of males!), especially if the values of the colours are close.
For those of us (like me) that didn't know exactly what web safe colors are, they were
developed at a time when many computer
displays were only capable of
displaying 256 colors. A set of colors
was needed that could be shown without
dithering on 256-color displays; the
number 216 was chosen partly because
computer operating systems customarily
reserved sixteen to twenty colors for
their own use; it was also selected
because it allows exactly six shades
each of red, green, and blue (6 × 6 ×
6 = 216).
The list of colors is often presented
as if it has special properties that
render them immune to dithering. In
fact, on 256-color displays
applications can set a palette of any
selection of colors that they choose,
dithering the rest. These colors were
chosen specifically because they
matched the palettes selected by the
then leading browser applications.
It's hard to imagine any of this applying to today's modern displays, since almost nobody runs their display in 256 colors anymore (unless perhaps they are playing an old version of Leisure Suit Larry).
It depends what you mean by web safe colours.
In terms of 16bit colour it's probably not worth worrying about. However Colours do not appear the same across devices. This can lead to all sorts of problems particularly if a designers gamma settings are different to your particular monitor set up.
So you still need to test your design across multiple set ups.
In my opinion, it's just history.
Yes, it's definitely a thing of the past. Place its importance right next to your marquee tags.
IMHO the point is really moot. Colors that aren't web safe are dithered anyway. It may not look the best in 256-color modes but as long as functional elements of the page/applications are not dependent on those colors it will not disturb the user experience that much.
Also most users surfing in 256-color modes will be aware of the fact colors will be dithered as I don't think that a lot of sites adhere to the web-safe colorschemes anymore.
According to research, even the web safe colors were not web safe. It was an interesting idea while it was relevant, thankfully that's over now.
Web safe colors are pretty much not a problem anymore unless you are dealing with consumers that will have legacy (think > 10 year old) video display equipment.
It's still important if your target very poor to developing nations, such as countries in here south asia. I personally have a full blown IPS monitor with Windows 10, so it's not a problem to me, but we are minorities, and majority of them have old hardware/computers/operating systems except mobiles phones, as it's cheap to buy a latest mobile phone, but computer hardware are expensive due to the taxes/ import cost etc.. compared to the salary of an average person.I personally witnessed many people still use old Windows XP, 98 PC with 256 colors on Pentium 4 processors. So if you target such audience, it's better to use web safe colors, but if you are doing a business it's not worth, as they are less likely to be your customers, but if you are doing an information site, a blog, an activist site that people can read and get informed without having to pay for something then always use fallback theme or something with web safe colors. since such people are mostly on windows xp/98, try to detect the OS, and if the user is from such operating systems, then use the fallback theme.
So remember that, most of people in this world are poor, and most of people still use old hardware and technologies. If you want to cover them all without working a lot hard on your current theme, then always use fallback themes. One for old mobiles, one for old desktop displays, one for modern displays and modern mobiles (responsive)
Some colors do not display on some mobile devices. (trying to make a list)
The title bars are supposed to be a blue fade from CSS:
background: linear-gradient(to bottom, #0099CC1, #0033CC) repeat-x scroll 0 0 #006DCC;
On many devices the background is not visible, and the header looks like white-on-white.
So, I'm just trying to explain the tip to determine browser-safe colors just by looking at its hex code
For a hex color #xxyyzz, the color is browser safe if
For pairs:
position 12 i.e xx values are same
position 34 i.e yy values are same
position 56 i.e zz values are same
Allowed values are
0
3
6
9
C
F
I especially hear it from those advocates of "business" notebooks manufactured by IBM/Lenovo, HP, Dell (maybe) that "business users do not need quality screens". They stick in the worst possible LCDs out there (even if with a high resolution) and dare to sell that crap. You can't even distinguish hue variations like light-yellow vs. light-grey.
I really miss it - do all of you agree color reproduction of a developer display is irrelevant, be it even a grayscale display it will do?
I understand most of developers work with text but... at times there is some design work to be done which is not doable on cheap LCDs.
And besides - wouldn't you enjoy fresh saturated colors even in a development environment? Bright cheerful icons on menus? Isn't it better to sit in a sunny office with green trees and flowers out of the window than in a garage with dark colors and weak artificial lighting?
P.S. Inspired by the topic about keyboards: Keyboard for programmers
The question about displays and developers really interests me since a very long time.
Even though I don't need a high quality screen, I appreciate the difference, and like esnoeijs said, an occasion will arise where I'll need to critique some graphic design work where the quality monitor will make a difference.
I think, "developer" is too broad to give a precise answer.
If you are a code-crafter of programs reading text emitting text, without the need to make some colors look nice, then yes, then you really can go with a monochrome screen. you need black as a background, white as the foreground and some reversing to highlight matching braces. In this particular case, I would value high resolutions far far more important than colors, since usually it is about seeing more code (and especially, more things about and around the current piece of code, like documentation, tests, a quick interpreter loop, some research paper, you name it).
If you are a developer just learning a language and if you have an editor with syntax highlighting, then color is a massive, massive usability leap. I would not want to miss the ability to display keywords in a bright pink, strings in a brigt cyan and similar things (all on a black background)
If you are a frontend-designer, then it is a completely different story. If you are a frontend designer, you will need a high quality display with good color display abilities. You do not need the best one possible, but your display should at least be able to display the colors your regular user will use, so you will not put in green, because you wanted blue and your users see yellow (or other nonsenses).
if you use tools that require the use of colors in order to encode information, color is crucial, because you might be unable to see the additional information.
...
So, I think, most programmers do not need some ridiculous color displaying abilities, even though, most of the time, a good solid color display is helpful, because they need to work on some frontend or because they want to learn some language.
HTH,
Tetha
Better quality color monitors can come in handy in a lot of ways. The first way that comes to mind is if you are using a code development tool that has the capability of highlighting keywords such as Zend does.
I once spent half a day trying to add zebra striping to a table in my company's webapp that already had it because both my screen and QA's screen were unable to display the different colors of the zebra stripes (they rendered as the same color). Likewise, I once had my boss ask me to change the color of part of an icon, and to me it made the icon look like a uniform blue, but on his much better monitor, you could clearly see both shades of blue and it looked really nice... it was hard to make that edit without being able to see what I was doing.
I guess the developers in my company end up doing some design work in addition to real dev. I do spend most of my time in the shell though, so aside from the constant flickering that gives me headaches (yes, it's an LCD), a low-qual monitor is OK.
I'm a developer but being in webdev land i've picked up enough design stuff to be critical about it, so i mostly try to get samsung screens with a good colour range.
With a good monitor, you can adjust it to your likings.
Personally, I have a $700-Fujitsu Siemens monitor bought in (afaik) 2000, and a $340-BenQ bought in 2005, and I prefer coding on the first monitor, as I don't have to crank up the brightness (reducing headaches) and can still see everything I want to see (subpixelhinted 6 point fonts, subtle variations in syntax highlightings etc.).
At least one author would disagree. He ranked color accuracy on four notebooks:
Lenovo ThinkPad W700
IBM/Lenovo ThinkPad T60
Dell Inspiron Mini 9
Apple late-2008 MacBook Pro 15 inch
I'm less picky about the actual monitor I have and more picky that I have two monitors that are exactly the same model and use the same video connector.
As a web developer, it can be frustrating to have colors that don't match because one of your monitors is VGA and the other is DVI.
Possibly the sort of "business user" who works on invoices all day does not need a very good display, but anyone who works on anything whose appearance counts, from software developers to business users who need to make Powerpoint presentations, does.
If you are a hardcore terminal+vim user like me, they color quality and fidelity are almost irrelevant, except for the quality of blue (which I use in some situations, like directory names) which tends to be too faint to be seen on my black background. Nothing that cannot be fixed with some tinkering though, but I am used to blue.
That said, I actually have a couple of things to say about the new screen on the macbook unibody. The glossy finish is a real pain. So annoying. And the color fidelity is very low. I spent an evening trying to understand why on a gradient from light green to white I had a pinkish stripe. Turns out that the pink is an artifact of the macbook screen. Another screen does not show the issue. On the plus side, the LED backlight is very powerful and nice, making the colors very vibrant.
This to say that color fidelity is fundamental if you use color-intensive stuff like eclipse (which communicates a lot also through different shades of colors), and of course for web frontend development. If you just need a terminal and a vim running, I don't think color fidelity makes a real difference, once you have a comfortable setup with low reflections, and a good contrast.
(note: it's been a few years since I've shopped for a monitor. this may be out of date)
I find it interesting that nobody has really defined "quality" yet, other than to say more vibrant colors. Generally, LCD panels fall into one of two tracks:
Good color/image reproduction (S-IPS panels and similar)
Good response time ( TN panels )
I consider SIPS and similar panels a must for development for one crucial reason: look angle. The image doesn't change colors or do other weird things as you angle to the screen changes. Very important for collaboration.
At the high end of this scale are monitors that are designed to perform will with color calibration. Most developers won't need anything this fancy.
TN panels are decent for gaming, movies, and other things featuring fast motion. They are optimized for pixel response time, and it's usually the main feature touted for these panels. Many cheaper panels are going to be of this variety.
In a monitor, I look for four things:
panel type (S-IPS or similar)
brightness (no more than 300cd/m2)
dot pitch (for good text, go with a small dot pitch: 0.27 is too big)
good contrast/ light leakage/ etc. (how black is black, and how uniform)
Although I love S-IPS panels, I must admit that any LCD monitor that can meet criteria 2-4 above would be a good choice, even if it's a cheaper TN panel.
It depends what you're doing.
If you're dealing processing images, yes, a good "quality" monitor is important.. but equally (or more) important to have it set-up correctly and calibrated.
If you're doing web-design, having a decent monitor is important, but again only if it's setup correctly (contrast/brightness/colour-balance).
If you're just "writing code", having a monitor your eyes like is important, the colour replication isn't important. A monochrome monitor might be stretching it, syntax-highlighting is nice, but even vim and it's 16 colours is "enough"
The term quality is also a bit "it depends" also.. CRT's have far better colour replication than TFT's, but I wouldn't recommend them (I always found reading text on them difficult, and they are hard to find, bulky and generally deprecated now).
For web-design, pretty much any monitor will be fine as long as it's not a 10 year old CRT with a broken red cathode-tube.. Again, as long as it's set-up correctly, most monitors are capable of displaying colour "good enough"
For "writing code", I think size/resolution/number-of-screens is more important than colour replication, as shown by most answers to any of these questions
Like any responsible developer, I'd like to make sure that the sites I produce are accessible to the widest possible audience, and that includes the significant fraction of the population with some form of colour blindness.
There are many websites which offer to filter a URL you feed it, either by rendering a picture or by filtering all content. However, both approaches seem to fail when rendering even moderately complex layouts, so I'd be interested in finding a client-side approach.
The ideal solution would be a system filter over the whole screen that can be used to test any program. The next best thing would be a browser plugin.
I came across Color Oracle and thought it might help. Here is the short description:
Color Oracle is a colorblindness simulator for Windows, Mac and Linux. It takes the guesswork out of designing for color blindness by showing you in real time what people with common color vision impairments will see.
Color Oracle is great, but another option is KMag, which is part of KDE in Linux. It's ostensibly a screen magnifier, but can simulate protanopia, deuteranopia, tritanopia and achromatopsia.
It differs from Color Oracle by requiring an additional window in which to display the re-coloured image, but an advantage is that one can modify the underlying image at the same time as previewing the simulation.
Here is a screenshot showing the original figure on the left, and the KMag window on the right, simulating protanopia.
Here's a link to a website that simulates various kinds of color blindness:
http://www.vischeck.com/
They let you check URL's and Screenshots with three kinds of different color blindness types (URL checking is a bit dated though. Image-check works better).
I'd encourage everyone to check their applications btw. Seeing your own app with others eyes may be an eye opener (pun intended).
I know this is a quite old question, but I've recently found an interesting solution to transparently simulate color blindness.
When working with Linux, you can simulate color blindness using the Color Filter plugin for Compiz. It comes with profiles for deuteranopia and protonopia und changes the colors of the whole screen in real-time.
It's very nice because it works transparently in all applications (even within Youtube-Videos), but it will only work where Compiz is available, e.g. only under Linux.
Here's an article that has some guidelines for optimizing UI for color blind users:
Particletree » Be Kind to the Color Blind
It contains a link to another article with the kind of tools you were asking for:
10 colour contrast checking tools to improve the accessibility of your design | 456 Berea Street
A great paper that explains a conversion that preserves color differences is:
Detail Preserving Reproduction of color images for Monochromats and Dichromats.(PDF)
I haven't implemented the filter, but I plan to when I have some more free time.
I found Colour Simulations easy to use on Windows 10. This software can apply a color-blind filter to a part of the screen or the whole screen. And what's great is it allows me to interact with my PC normally as if it doesn't exist in fullscreen mode. It runs quite slow in my 4K screen using an integrated graphics card, though.
Closed. This question is off-topic. It is not currently accepting answers.
Want to improve this question? Update the question so it's on-topic for Stack Overflow.
Closed 9 years ago.
Improve this question
In a discussion with co-workers today, I lamented that I can't ever remember what an icon means, and have to hover over them to see the tooltips, and thus to find the button I need.
On their side, they were saying that when the text needs to be translated, it might not fit (German vs English for example), and that every place where there is text, including tooltips, it needs a translation. So plain icons are easier.
What is the best tradeoff in useability for the extra work of text vs the subset of users who are icon-challanged?
I personally prefer text and hate icon-only UI's. I know that other people think the other way, equally strongly, either because of internationalization or because their brain works more rapidly with images than with text. If you choose one or the other exclusively for your UI, then part of your user base will be unhappy with your choice. (Sometimes this is the right choice, depending on how extensively the UI will be used.)
Internationalization is really not that difficult, except for finding a firm to do good translations of your text. The programmer portion of internationalization is pretty straightforward. However, I've known a number of programmers who prefer the all-icon method as it's less work. I've personally had to replace one all-icon-no-text UI that the users didn't like. The users said they could not remember what the icons meant.
I think more typically, many advanced users will prefer icons and many beginning users will prefer text. However, a number of advanced users prefer text. IMHO, any good UI will provide tooltips, so you need to translate your interface no matter what you do.
The most friendly solution is to offer both text and icons, possibly with a settings choice to disable one or the other.
I worked with people in a Human/Computer Interactions group and was raked over the coals for using icon-only. They had studies about comprehension, error rate, and speed of using UI's and a good icon/label combination won every time, all else being equal.
Localization should be a non-issue. You may have to localize the icons anyway and localizing a label (as long as it's stored as text and not as bits) is easy. In terms of size in the UI - that's another matter entirely. If you can't fit the text, I'd claim that your UI is too cluttered.
Really they both have advantages and draw backs. Text must always be translated into different langugues, and sometimes a single word will not be able to effectively describe the action of a button. For example, how would you describe the X button which closes a window in Windows. We know what it does, and most people I know call it the X button, but it doesn't describe what it does. It's a lot easier to put a button with an X symbol (or icon if you will) than put something like "close window".
That being said icons also have drawbacks. As you eluded they may not always be clear what they do. The user has to be able to put the icon in a social context to understand what it does. This may not always be possible. Also, icons in one language may not be understood in another, leading back to the translation problem. Icons can be advantageous in certain areas as they can take a complex concept and show the user with a small amount of space. (like to take a picture show a camera, or delete something showing trash can).
The trade off is really in a case by case basis. If you have power users who really understand the application they are using and the surrounding subject, you are probably ok with using them. If you have people who use computers once a month and don't really care to learn it is going to be confusing. Its the amount of information you can convey with a single symbol (icon, picture, letter) vs. the potential frustration of the users and the overall rejection of your program.
Make sure you have a way to get both. Screen readers have a horrible time with icons.
I hate icons, because I never know what they mean even if they're perfectly intuitive (like this world icon that means hyperlink above this box in which I'm typing). Several Unix terminal applications provide a choice between:
text
graphical icons
both
That's nice. I usually like the text on a prominent button, because the meaning of the button is much more clear and the mouse target can be a little bigger.
Its a cultural thing as some symbols (icons) mean different things to people of different cultures, backgrounds and experiences. There are global symbols that one could assume to be 'known' by the general population, i.e. the 'save' icon...
It is a fine line, but i think the tooltips are a good way to help out those who dont understand the meaning of the icon. Perhaps a set of options to have the buttons (icons) render with text instead of the icon image ? This could be a user preference in the application.
Perhaps a good reference would be some of the "extensively" used icons in microsoft applications such as 'Word'. I am generalising here, but microsoft applications are almost eveywhere and they have done all the R&D into suitable / effective icons.
You don't mention if this is for a web application, but if it is then you have to provide the text at least as a backup if the user has disabled images, is using a screen reader, or other limited interface.
two things i guess
the decision should be the result of usability research and properly quantified, rather than a dev's gut feel or whim.
an icon that doesn't carry an obvious meaning is a bad icon and should be changed.
all that said, IMO: Icons with a tooltip/mouseover text equivalent, with bonus that this can carry a reminder of the keyboard shortcut.
(Note: I use "button" here to mean "the UI element on which the icon and/or text is located.")
I think in almost all cases it's important to include text either on the button itself, or at least on a hover-over tooltip on the button, so that in the event that the icon's meaning isn't intuitive to a particular user, the user can find out the meaning by reading the text. (Note that the translation work still needs to be performed in either case.)
A typical case for not including text directly on the button itself is when space is at a premium; when you want to fit a lot of buttons into a small area. Examples include the "toolbars" used in many desktop applications, and also in some web applications -- for example, the buttons that appear just above the StackOverflow answer text entry field!
A good case for including icons is when the button doesn't always appear in the same place, and the user would benefit from being able to quickly visually scan for where the button is located. For example, if I have a lot of programs open on Windows and I want to quickly find my instance of Firefox in the Windows taskbar, I'll look for the little orange icon, rather than reading the text on each taskbar button.