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:
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
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
On Jun 25, 2012, at 3:29 PM, Pau Giner wrote:
- 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), 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?
It wasn't avoided; the grey scale that is there currently is a catalog of existing greys that are in use within mobile and a couple other places. Feel free to come up with additions.
--- Brandon Harris, Senior Designer, Wikimedia Foundation
Support Free Knowledge: http://wikimediafoundation.org/wiki/Donate