Re: [Design] More on Color

Hi,

I have been working with the Universal language designs to adapt them to the Agora palette. I have found the following problems that I wanted to discuss:

*1. Unbalanced shades of gray.*

Five levels of grey are proposed for the palette. If we divide the black-to-white spectrum in three parts, four of these 5 levels fall in the last third (light grey) and one in the first one (dark grey close to black). To de-emphasize some text using grey (e.g., something similar to what twitter does https://si4.twimg.com/help/1323220592_59075), I need a grey that is lighter than black but readable in a white background. So I find there is a gray level for the middle third lacking. Was it avoided for some purpose?

*2. Learn more links and feedback messages.*

To provide some feedback message, I was using the accent colors of Agora. Since the message was some confirmation I used blue. Some of the messages contain a "learn more" or "undo" link, but since I could not represent the link in blue (if I wanted it to be visible) I followed a different approach based on the ellipsis icon. I created some example notifications to illustrate the point (text is a random example): http://dl.dropbox.com/u/30377416/design/notifications.png

The problem is that it breaks the standard of representing links in blue (to avoid hard to read combinations). Presenting the "learn more" link as a grey button could work but it may require too many boxes. Any other suggestions on this topic?

Pau

On Sat, Jun 23, 2012 at 8:33 PM, Brandon Harris bharris@wikimedia.orgwrote:

   So, I've been playing around with the colors and such today and

after

           * having replaced the blue with Lindsey's suggestion;
           * removing orange from the "default" palette,
           * played around with some super serious color-blindness

tools,

   I have come to the conclusion that our remaining "problem" color is

the green shade (#008740) that I love so dearly. It just isn't working when you switch to any of the R/G colorblindness tools.

   So I'm working on a new shade.  This is more of a pain in the ass

than one would think: you can either work entirely in "colorblind" mode (thus not seeing the real work) or work in "real" mode, and thus keep having to switch.

   I've yet to find a good tool that will tell me straight up if

there's enough contrast between the two.

   At this point, I think we may have to just bite the bullet and pick

a red and a green that are sub-optimal in this regard and then write up some strongly worded rules about the usage of the two colors with each other.

   I found this bad-ass little app:

                   http://colororacle.org/

   That sits in your toolbar and is "always ready" for tri-level

switching (proto, deutro, trinopia). Photoshop has proof colors for the first two, but not the third, so it's useful.

   I also found this wonderful paper:

http://colororacle.org/resources/2007_JennyKelso_ColorDesign_lores.pdf

   I'm wondering if we shouldn't step outside of our group a bit.

There *has* to be someone at the foundation with either proto or deutro; maybe we can enlist them to help us.

---

Brandon Harris, Senior Designer, Wikimedia Foundation

Support Free Knowledge: http://wikimediafoundation.org/wiki/Donate

---

Design mailing list Design@lists.wikimedia.org https://lists.wikimedia.org/mailman/listinfo/design