by anthony 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.