I agree with Vibha, the text should be more similar to the button color. I believe that text on a disabled button qualifies as "Incidental" in regards to the web content accessibility guidelines (WCAG 2.0) by W3C[1], which exempts it from being required to have a minimum contrast ratio. This is great, because it means we can focus on making the button easily to identify as disabled.

Given the background colors we are using it's not possible to get far enough away from them to satisfy the WCAG anyway. Even with pure white text on #7297D7 (the disabled blue background color, for example) you are only getting a contrast ratio of about 3:1 – guidelines suggest 4.5:1 ratio for text smaller than 18pt. You can check the contrast ratio of a given background and foreground color using an online tool[2].

- Trevor

[1] http://www.w3.org/TR/2008/REC-WCAG20-20081211/#visual-audio-contrast-contrast
[2] http://www.snook.ca/technical/colour_contrast/colour.html

Using less, it's pretty easy to calculate a text color that's lighter than the button color.

On Thu, Aug 9, 2012 at 5:15 PM, Vibha Bamba <vbamba@wikimedia.org> wrote:
hey Pau,
Thanks for doing this.
One quick comment: the type color is fairly dark in the disabled state. IMO, desaturating the label is key to conveying 'This is disabled'

On Thu, Aug 9, 2012 at 4:46 PM, Pau Giner <pginer@wikimedia.org> wrote:
I have been modifying the Agora Less stylesheet to include: gray (normal) buttons which where lacking, and disabled versions for all colors.

I have pushed the changes to GitHub in the following pull request: https://github.com/wikimedia/agora/pull/1
Although I tried to use git-flow as it was suggested in the documentation, I ended up using plain git commands to submit the changes since I was not aware of the git-flow command to download an existing remote branch and update it. 
All information I found on git-flow was about creating new branches from scratch, not on how to improve work from others. It would be great to have some command examples illustrating this in the repository documentation.

Pau

--
Pau Giner
Interaction Designer
Wikimedia Foundation


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



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