Top 6 Color Mistakes You’re Making and 1 You Never Thought Of

It’s finally launch time. You’re ready to share your website with the world. You’ve made sure your design is Intuitive, Actionable, and, most of all, Stunning.

Just look at your use of color!


That site doesn’t exactly invoke the ideal emotional reaction. Unless that reaction is immediately closing the browser tab. But how can you avoid such a design fumble and still make an impact?

Tealix has you covered. Stay far away from these 7 mistakes and you’ll be on your way to design success. Don’t be ashamed if you find you’re guilty of any or all of these. They’re “Top Mistakes” for a reason.

1. Your Palette Is Too Extensive

Think of your color palette as the personality of your company. More is not better when it comes to a website’s color palette. There should be a theme and the colors should appear unified. Throwing too many colors at a single layout will leave your site looking amateurish, disjointed, and random.

2. Vibrating Borders

Apologies for the ocular assault but it’s clear why this mistake must be avoided. Placing complimentary colors of the same value (brightness or lightness) close together forces the brain into a eye-burning juggling act. The brain tries to compensate for the different amount of light and color it sees. The ultimate effect is a nauseating imagined movement that...okay, sorry that’s enough. We can’t look at that image anymore. Next mistake, please.

3. Black Text On A Dark Background

Render your text invisible with this mistake. It’s easy to assume that default black text works with every background color. As we can see, when the colors are too closely related the text becomes practically illegible.

4. Borders Around Text

Another absolute way to muddle your text. Instead of making your text stand out, adding this effect blurs it. Your text blends into the background and gets lost.

5. Dropshadow On Dark Text On A Dark Background

The third text eraser. As with the border, dropshadow makes your text fade into the background especially if that background is dark. The only thing the above image achieves is making you want to visit your optometrist. If you do find an instance where a dropshadow helps further the contrast between text and background, don’t make the shadow too intense.

6. Low Contrast Between Text And Image

The final member of the illegibility quartet. As we’ve seen, contrast between text and background increases readability.

7. Doesn’t Pass The Colorblind Test

This raises a question of accessibility. Make sure aspects of your site aren’t invisible to a lot of your audience. Colorblind tests, like the one above, use complimentary colors of similar saturations and values. If you can’t see the two shapes in the above image, you may be colorblind.

Color and color theory are extremely complicated. But mastery isn’t necessary for effective use. Need some helpful hints? Check out our article on tools to help you pick the best colors for your design. Or drop us a line. Don’t hesitate to reach out and say “Hi”.


Related Posts

See All