Learn
Color Theory

Best Practices

Now that we’ve talked through how to choose the proper colors for your designs, there are some best practices to consider as well.

Use neon colors sparingly. While the use of neon colors can feel hip, they are often hard on a user’s eyes.

Avoid vibrating colors. Vibrating colors result from pairing two colors with high saturation together that may be complementary to one another. It creates a glowing or moving effect, which also can be hard on one’s eyes.

For example, the red and green pairing that is common with Christmas cards is very glaring when presented on a screen. See the example to the right to notice how intense and distracting this pairing feels.

Use backdrops to separate vibrating colors. In the example, the white backdrop behind the green card reduces the space where the contrasting colors (red and green) are directly next to each other, but the overall effect is still too intense for most websites.

Avoid color combinations with insufficient contrast, including:

  • Bright colors on top of bright colors
  • Light colors on top of light colors
  • Dark colors on top of dark colors

Even if there's enough contrast in these pairings for the different colors to be legible, they likely won't create enough contrast to attract the user's attention.

Remember that most users skim websites! They are not reading every word and checking every menu—you need to guide the user to the most important content with good color choices.

Community Forums
Get help and ask questions in the Codecademy Forums
Report a Bug
If you see a bug or any other issue with this page, please report it here.