In my quest to keep trying new designs and learning new code in webdesign, I’ve come up with some accidentally awesome designs over the years. Some of the code and colors that I thought would probably never work turned out beautifully in the long run. But, as with any trial-and-error process, I have ended up with a few misfires as well. The following design contains one such misfire.

When I designed Version 13 of my main domain last year, I was trying a new type of color scheme–purposefully using contrasting colors.

The problem does not lie in this concept, but rather the choice of red for my website’s background color. Since I don’t often use red in my designs, given that I personally dislike the color, I wanted to try something different in my design color schemes this time around. And for the most part, the resulting color palette of tomato red, creamy orange, and bright periwinkle worked pretty well…

It worked well enough, that is, until I realized how stressful on the eyes that red background was.

The Problem

Though I had taken time to view each page before I uploaded my site, just to make sure it all displayed properly, I didn’t take into account how the colors would affect extended reading. One of my friends brought this up as I was discussing my recent website work, saying, “You know, I love going to your site, but that color hurts my eyes after a while.”

I was stunned, and then, after a moment of thought, I understood. I had made a similar mistake using bright red as a background color several years before, as a newbie designer, and back then, I had received similar comments. But I had foolishly thought that a darker red would not trigger such problems. Obviously, I was wrong. And if even a good friend could not view my page without problems, how badly had the design choice affected visits by other Websurfers?

Great Website Colors: A Balance Between Striking and Relaxing

If I did this design over again, I believe I would choose the same color scheme–but with a definite change. I would reverse the usage of the periwinkle blue and tomato red, making the blue the background color and the red a lightly-sprinkled accent color. The main reason? Blue is a much easier color on the eyes than red; it makes reading website content easier, which would make my visitors much happier.

Yet, as designers, we don’t have to retreat completely into neutral, “easy viewing” colors. Instead, try using powerful, vibrant colors in smaller doses, balancing them with softer, more neutral colors for an overall attractive design. In fact, a little kick of color in the right places can really make your website design sing with purpose!

For instance, I could still use that rich red color, but only sparingly, much as one uses a strong spice in cooking–I could use it to attract attention to updates, draw the user’s eye to the navigation section, or just add bits of visual flair around the mostly-blue page. It would add a little punch of red, but not too much that it distracts or makes the page difficult to read.

Summary

If you’ve learned that your website’s color scheme is a little too strong for people’s eyes, learn from my fail: try making the softer/neutral color the background, and use the strong colors as accents and attention-grabbers. Who knows, all it might take is reversing two colors to positively change how visitors use your site!