Why You Should Never Pair Green and Red Together on the Web

by on 12/24/10 at 4:33 pm

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 reasons why you should avoid using green and red together on your website.

Low color contrast for color blind users

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 your site more color contrast, and allow all of your users to experience the beauty of your website.

Low color contrast in general

Green and red colors compete when they’re placed next to each other. They are complementary colors, which means they are on the opposites sides of the color wheel. Green and red and other complimentary colors flow and blend into each other. When they’re together, they tend to make each other brighter by competing for the foreground. This means that there is low color contrast between them, which is not ideal if you’re trying to contrast elements.

Creates conflicting mental processes

In society, green means go and red means stop. This is how people interpret the colors when they’re on the road, and this is how they’ll interpret it on web. If you use a green and red button together, the buttons will conflict with each other and users will process them differently. Since they’re call-to-action buttons, you want users to click on them. However, most users could get confused by the conflicting colors and end up not clicking any button or just one of the buttons. To avoid this, choose either green or red to use for your call-to-action buttons, but not both.

Choosing what colors to use for your design is important, not just for aesthetic reasons, but for accessibility reasons too. Designers who care about their users will value accessibility and choose color combinations that work for all users.

9 Responses to “Why You Should Never Pair Green and Red Together on the Web”

  1. Brandi

    Dec 29th, 2010

    In my experience, unless they’re isolated, green and red tend to look terrible together anyway.

  2. amir khella

    Jan 4th, 2011

    That’s bad news for Santa!

  3. [...] Why You Should Never Pair Green and Red Together on the Web – UX Movement The illustrations in this article make it much easier to understand the impact of color blindness. 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 reasons why you should avoid using green and red together on your website. [...]

  4. Matthew

    Jan 26th, 2011

    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?

  5. Bart

    Feb 27th, 2011

    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.

  6. Christian

    Mar 31st, 2011

    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.

    • Bijuterii Argint

      Sep 3rd, 2011

      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.

  7. Adi

    Nov 18th, 2011

    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 !

Leave a Comment