Skip to main content

Light On Light

Using a light colored font on a light colored background is just a bad idea. It is difficult to read. Every. Single. Time. Don't believe me?

  • How does ths work for you?
  • Or this? Is this super pleasant and easy to read?
  • No. Just...no.

The other mistake people make is putting text over an image in a header and having it blend together.

Consider using something with a mostly solid background.

Bright On Bright

Similar to using light colored fonts on a light colored background, using bright fonts on bright backgrounds is a definite no-no. I mean, look:

  • This is no picnic.
  • Do you want me to not look at your website?
  • This just makes me sad.

Like with neon, use bright fonts sparingly and never on a bright background.

Neons

Neon colors can be a fun addition to your website/guide, providing a pop of color that can draw a user's attention to important information. However, neons can also be very difficult to read and when used excessively, headache inducing. Consider:

  • MY EYES, THEY BURN!!
  • This isn't much better.
  • Same for this.

Consider using neon colors sparingly and with smaller elements. Also think about removing some of the brightness for a darker, more muted look.

Vibrating Colors

When highly saturated colors are paired, they create a “vibrating effect” where colors seem to almost move in a blurring or glowing motion. You don’t want to do this.

It is actually pretty easy to predict when colors will "vibrate".

  • High saturation of each color.
  • Complementary on the color wheel.
  • Spaced 180 degrees apart on the color wheel.
  • Converting the colors to gray scale results in very little contrast.

A classic example of vibrating colors is the Christmas combination; bright red and green. Furthermore, vibrating colors also provide accessibility issues as they are undecipherable to people who suffer from color blindness.