Learn

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.

Sign up to start coding

Mini Info Outline Icon
By signing up for Codecademy, you agree to Codecademy's Terms of Service & Privacy Policy.

Or sign up using:

Already have an account?