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 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 to identify text, labels, buttons and links.

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

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.

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

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.

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

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. They may be in the minority, but they still deserve a good user experience when they visit your website.


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

Author and editor-in-chief of UX Movement. Loves great web experiences and fights for the user.

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