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.

Toolkits