20

This is a snippet on a site i have just been building. I considered the readability etc, and the corporate colours, and tried to work with them.

Site screen print

Actually, I find it quite relaxing to read and view, and I have not had any comments from the testing people or users that there was an issue. Overall, green is a fairly easy colour on the eyes.

But someone has commented that they don't like it, and find it hard to read. While I want to accept their views, I am puzzled. So I wondered whether I have missed something here. Is this colour scheme one that the other UXers here would consider reasonable or not?

edit The red that I am using is darker than the normal error red, which I do use to highlight problems.

edit As I point out in comments, I am not a UI developer. The puzzlement is not that people don't like my designs ( heck, I'm not that sensitive ), it is that no-one else commented previously. And, as I said, there are a whole set of other requirements. Some of these would rule out a completely white background... ( which is what I started with ).

I accept everyone's comments. I think, sadly, that I will not have time to alter this, but the feedback is helpful.

I will just go into a corner and cry for a moment...

edit Thats interesting. I have just moved my browser from its usual monitor to my other one, and suddenly, it looks dreadful. So I think I have been fooled by a monitor that dulls the colours, and doesn't display them well. So what I have seen is, in fact, different to what others see.

Improve this question
13
  • 3
    It's still red though.
    – Matt Rockwell
    Dec 19, 2011 at 15:07
  • 27
    The corporate colours may not fit well into a GUI. Consider branding via icons, banners, etc; NOT the overall background color.
    – Jake Berger
    Dec 19, 2011 at 15:09
  • 13
    red/green colour blindness anyone?
    – colmcq
    Dec 19, 2011 at 16:28
  • 6
    I'm red/green colour blind, and it took me a while to find where the red was. Still not totally sure.
    – Andi
    Dec 19, 2011 at 18:19
  • 21
    Don't take this as criticism of character, it's simply criticism of the design: It's ugly, and it looks as though one of Santa's elves vomited all over the page. The colors are too active, and don't complement each other enough.
    – zzzzBov
    Dec 19, 2011 at 19:09

12 Answers 12

Reset to default
37

First things first, this is what it looks like to color blind (deuteranopia; by the most common form of colorblindness) users: enter image description here (also the zebrastripes are almost impossible to see, colorblind or not)

Red on green is a classically bad color combo, though your magenta text isn't entirely unreadable. The background color is very loud though which can be hard on the eyes.

You are right that green is relaxing but it's often avoided in web design, I've found lots of users scared off by green (it's rather unfortunate as it's my favorite color, but I generally avoid it because of this).

For inspiration here's a good list of well designed green websites. Note the text is usually a clear black or white, and note how the few examples of red in those pages really draw your eyes.

Here's some good color contrast tools you can use to check accessibility and readability automatically. Note that these aren't a substitute for real user testing, but it can be good to first check how they match up and see if a color combo is at least technically accessible before you show it to users.

Improve this answer
11
  • 5
    @SchroedingersCat So subtle that it has no positive effect though.
    – Matt Rockwell
    Dec 19, 2011 at 15:59
  • 10
    @SchroedingersCat: in fact, it took me a couple of times looking at the UI to figure out what was even meant by the "zebra stripes" comment. The only column where they are even enough of a contrast to make a difference is the last one, and since I read left-to-right, I missed that entirely.
    – Wonko the Sane
    Dec 19, 2011 at 17:04
  • 7
    FWIW - I find this color scheme preferable to the original.
    – Wonko the Sane
    Dec 19, 2011 at 18:36
  • 4
    re: zebra stripes...if they don't ID the row as a whole, then what purpose to they serve?
    – DA01
    Dec 19, 2011 at 19:07
  • 3
    Perhaps the zebra stripes should be their own question
    – Ben Brocka
    Dec 19, 2011 at 19:09
22

Corporate colors are for visual branding NOT UI development.

The UI is supposed to assist and get out of the way of the user. That's why most tend to be neutral in their colors (grays, gray blues, etc.)

Improve this answer
3
  • 2
    My company's branding color is a very bright red, and I can assure you that it is NOT on our ui in any form, other than the logo itself! :)
    – Matt Rockwell
    Dec 19, 2011 at 19:00
  • I wouldn't necessarily use the corporate colours - but when I am encouraged to not have a white background, blending it with the header seemed a good option.
    – Schroedingers Cat
    Dec 20, 2011 at 16:51
  • Yeah, I agree. If you want to brand the UI for the company, just use their logo and name in header and footer where appropriate.
    – b01
    Dec 21, 2011 at 18:31
10

Yes, the colors may not be good for some. The screen is very organized, but I would suggest a better color theme. Not a drastic one, but I would make the background color much lighter than it is, as it is too loud. It seem to draw my attention passed the content.

Also red, is not the best default choice for font, as most website use that for errors, and hover events.

I would lighten the green gradient background to use: rgb(231, 255, 183) or the hex value of: #E7FFB7 and fade to white like you did.

Then I would change the red text to another color that worked well wit the background.

Improve this answer
8

Red text on a green background never works very well, which is counter-intuitive because red and green are opposite on the color wheel, so one would think that the contrast would be great. Unfortunately, it doesn't really work that way, and it creates a kind of micro-haloing effect when your mind tries to sort out the difference. The green background looks okay on its own, but I would stick with using black text.

Improve this answer
6

The Colour Contrast Check is a great resource to test whether or not your colors are compliant with various standards. After checking your colors here, it seems like your design is only partway compliant.

That aside, the green is rather bold and aggressive for a background. Depending on your target market this may work if it is somewhat of a niche market. If not, it is a bit too brash. I understand they are corporate colors and all, but there should be a more subtle way that you can incorporate them.

You should also avoid red as a "normal" color for text. red should be used to signify errors, alerts, etc.

Improve this answer
6

This is both hard to read and aesthetically off putting.

To qualify myself, I'm the owner of emeraldcode.com and kitgui.com and you can see UI design choices there. Note that my design choices are just that. I chose them, I didn't build them. I know that I personally suck at implementing design just like I know I should not go out to American Idol and audition singing "cats in the dryer". The only saving grace I have is knowing when something looks good or sounds good.

You would do better to take from existing frameworks like jQuery UI and then modify the theme to fit your corporate colors. To be blunt, this appears to be an effort from the early days of the web. If you look at any higher profile site such as Apple, Google, Microsoft etc you will be falling painfully short in the UI department. Please use frameworks to help you along. I've used jQuery UI and ThemeForest as both of them are up to snuff.

You would do well for yourself to learn HTML 5 techniques for both scripting and markup as well. Remember, you asked for an opinion and sometimes the ones you don't like are the ones you learn the most from.

Improve this answer
4
  • Great example of a proper use of green on emeraldcode.com!
    – Matt Rockwell
    Dec 19, 2011 at 18:52
  • I don't want to take the credit for that as I used ThemeForest. I do know when I'm not good at UI and defer it to the experts. :)
    – King Friday
    Dec 19, 2011 at 18:55
  • But, I recently did this ecommerce website -> klim.com/en-us and notice the lack of a white background. It all depends on your type of website. Hard-fast rules die hard.
    – King Friday
    Dec 19, 2011 at 18:59
  • 1
    You've got two good examples of good looking web sites.
    – Evik James
    Dec 19, 2011 at 21:56
5

I have a sight problem myself and I find this page very hard to read. The green on green zebra stripes especially. I also agree that the red coloring should be reserved for errors.

Improve this answer
3
  • 3
    This makes me wonder, are there good emulators/sites to check a site's accessibility for users with poor sight? Colorblindness is the standard check but age related sight loss is a more common vision impairment
    – Ben Brocka
    Dec 19, 2011 at 15:19
  • Absolutely point taken, but I do know the users for this, so I have less issues with making it completely accessible for everyone. I would not, to make it clear, consider my design skills up to a public facing web site. I always use professionals for the design work there.
    – Schroedingers Cat
    Dec 19, 2011 at 15:37
  • Probably the easiest way to emulate age related sight loss is to borrow someone's glasses, to get the 'blurry small font' effect
    – PhillipW
    Dec 19, 2011 at 18:32
3

I use always white as the main background color, so does Google, Facebook, Microsoft, Apple, Twitter, etc. It's an usability issue to use any other color. I personally refuse to read text written uppon any other colour.

Improve this answer
2
  • 2
    Yes, his example looks like it should have the Koolaid guy on there. He might as well have a color wheel on there for user preferences as anyone will do it seems.
    – King Friday
    Dec 19, 2011 at 18:58
  • 1
    Don't forget about the ux.StackExchange.com site! It's as white as white can be.
    – Evik James
    Dec 19, 2011 at 22:06
2

It is not the colour, it is the grading. I can feel my eye pupils dilating and contracting as they move automatically in the line, suffering areas of different contrast.

Improve this answer
1

I develop all new sites in black and white and shades of gray. I totally abandon color so that people HAVE to focus on content and shapes and layout.

I've actually had great success shifting people''s focus from color to something else when there is no color.

Improve this answer
1

I think the overuse of green dilutes the visual hierarchy.

If the page were the traditional white with black text, and the green was used to call attention to something, that would be a better use of brand to reinforce task completion.

Improve this answer
0

Apart from the coloring scheme in above design , there are other things which need to be considered such as font , readability.

Here's an interesting article about design patterns

http://uxdesign.smashingmagazine.com/2009/06/23/10-ui-design-patterns-you-should-be-paying-attention-to/

Improve this answer

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.