Everyone would agree that green and red are colors that pair well together on Christmas. But on the web, pairing these colors together can present problems for your users. There are three important reasons why you should avoid using green and red together on your website.
Color Blind Users See No Difference
Some users who visit your site will have a form of color blindness. The most common form of color blindness is deuteranopia. Users with deuteranopia have difficulty distinguishing between green and red. Avoid pairing green and red together and opt for colors that color blind users can distinguish. This will give elements on your site more color contrast, and help users find text, labels, buttons and links.
Color Hues Are Too Close on Visible Spectrum
Green and red color hues together tend to make each other brighter by competing for the foreground. This is because the hues are too close to each other on the visible spectrum. Even if you made efforts to increase the color contrast by making the background darker and the text on top lighter, you would still have relatively low color contrast.
Conflicts with Mental Processing of Buttons
On the road, green means go and red means stop to drivers. However, if you use this real-world mapping on your buttons, color blind users won’t know which one is the primary or secondary action because they’ll see both buttons as the same color. This will cause a conflict in the user’s mental processing and affect their decision-making when clicking a button. To avoid this, choose either green or red for one of your action buttons, but never both.
Choosing colors to use for your website is important for aesthetic reasons, but also accessibility reasons. If you care about your users, choose color combinations that are accessible to color blind users. You may not have a lot of them, but blind users still deserve a good user experience so that they can get the most out of your website.
Book
Affiliate
In my experience, unless they’re isolated, green and red tend to look terrible together anyway.
That’s bad news for Santa!
Really? Why? Santa has no green in his outfit.
Sorry, I call bullshit, or at least hyperbole.
Lets say, you have a transaction which has a great deal of consequence that someone might really want to cancel if it wasn’t all set up correctly (say, a large money transfer). Red has a great deal of meaning (“no”, “stop”, “warning”, etc) that can be used as an additional aid for the 95%+ of people that AREN’T color blind. This isn’t the case every time of course, but man, I hate it when people say “never”.
As long as you have a good solid text label, what could be the real problem with using red and green for buttons if you have a good reason for it?
Hands on experience, as a colourblind person myself. First of all, when friends find out that I’m colourblind, their first question/statement they ask/make is: “oh, so you see things black and white…”… well, no, we (or I) don’t.
I’m having problems with the usual greens and reds, although it’s a contrast thing mostly.
Let me give you a very practicle example. Paint a 4m by 2m large panel one half in red, one half in black. Standing a couple of meters away, no problem. I can clearly separate both colours. Now pick any text document you might have on your computer, choose a black colour for your font… Now “highlight” a couple of words in red in a sentence. To 95% of all people, these words will be highlighted and will stand out. To me and 5% others, it wont.
Graphs, pie charts etc with keys next to it are also great examples. If you use colors like “light-green, dark-green, light-red, dark-red oh and perhaps orange”, as well, you’re really making it hard for us. We might see a difference looking at the coloured keys, however matching it to the graph/pie chart is virtually impossible. So if graphs or pie charts are a necesary thing for your website/text, use symbols/patterns in combination with your colours. IMPORTANT then is that you don’t use a black symbol on a red background…
If 95% of you want to have an idea of what I am talking about, I would advise you to go to http://www.vischeck.com/vischeck/vischeckImage.php, pick Deuteranope, upload an image (preferably a photo) and see what I see. To you, it might be a whole lot different, to me both images are the same.
That’s a very useful website indeed, thank you!
I looked at a picture of a green and red Amazonian tree frog through the website and was horrified at the total loss of vivid bright red and green colours into a dull, vague olive view.
It’s lucky people are born with this condition otherwise their hearts would break at a sudden, horrific loss of vividness from their world.
As it is, they’d never know what they are missing, thank goodness.
I think the article is quite superficial. Color Blindness is seldom. But indeed there are many persons (especially men) who have problems with green and red. However, that hadicap is not as “black and white” as suggested by the article. Me myself I have a slight red/green impairment, meaning I can very well distinguish green and red on a traffic light. But I have difficulties with less intense colors like olive, browns and ocre. And in this case – you are right – I prefer combinations with dark-light-contrast.
Green and red are annoing together for people who see normally too. Maybe it would be ok to use these colours only to highlight buttons, or text areas, not creating a whole page in just these 2 colours.
@Christian: Your comment about color blindness being “seldom” strongly suggests you don’t understand the term “color blindness”. I believe you are restricting your definition to monochromatic vision, in which people see NO color at all, just black, white, and shades of gray in between.
There are several forms of color blindness that only affect certain colors – and these are far more prevalent than monochromatic vision.
I have a ‘problem’ (to use your term) with red and green. I can’t distinguish between them very well. That is a form of color blindness. 8% of men suffer from that, if I remember my psychology degree correctly. It sounds like you have the same problem as me.
Unlike you, I am happy that people are discussing an issue to eradicate a problem I often face.
In my personal experience, larger areas of color, as well as more highly saturated colors (like traffic lights) are possible to differentiate. My recommendation is not to use color coding as the *only* differentiator between two icons or buttons. Add some redundancy – I can see the difference between two white icons whether the background be a red OR green patch of color.
so contrary to the color theory, not using green red together means we should not use any opposite colors in color wheel at all while creating a color scheme ?
or is it just specific to red-green case ?
Nice insight !