I noticed that the Aloha bar has a fairly "hard" gradient. It's a bit of a unwritten rule, but much of Seven's styling is "soft" which means the gradients, don't go from white to gray, but from a light gray to slightly darker gray, borders don't contrast a whole lot with the white background etc. It shouldn't be a accessibility problem, as much of this is of decorative nature.
I would suggest to make the gradient be, #F3F3F3 0%, #E7E7E7 100% and the borders be #CCCCCC.
We can discuss how soft/hard we make it, but right now it looks like it has different visual styling than Seven.
| Comment | File | Size | Author |
|---|---|---|---|
| #6 | Screen Shot 2012-10-25 at 17.14.55.png | 67.33 KB | wim leers |
| before_after_wysiwyg_aloha_styling.png | 37.42 KB | Bojhan |
Comments
Comment #1
webchickI agree that looks better to me too, at first glance. Will ask Kevin to take a look.
Comment #2
tkoleary commentedYes, that is more legible. Can you pass the CSS for that to Wim to add a patch?
Comment #3
wim leersThis also means the resulting look no longer depends as much on the height of the toolbar (the number of rows of buttons, in case the toolbar is not very wide or in case there's a zillion buttons). So it makes things a lot simpler too :) Yay.
Comment #4
wim leersWill commit ASAP.
Comment #5
tkoleary commentedHere's the CSS:
background-image:-moz-linear-gradient(rgb(245,245,245) 0%,rgb(229,229,229) 100%);
background-image:-webkit-gradient(linear,color-stop(0, rgb(245,245,245)),color-stop(1, rgb(229,229,229)));
background-image:-webkit-linear-gradient(rgb(245,245,245) 0%,rgb(229,229,229) 100%);
background-image:linear-gradient(rgb(245,245,245) 0%,rgb(229,229,229) 100%);
Comment #6
wim leersI'm not sure if #CCC for borders is a great idea, it seems there's very little contrast remaining then. See the attached screenshot.
I did commit the gradient changes already though:
- D8: http://drupalcode.org/project/aloha.git/commit/a494ec1
- D7: http://drupalcode.org/project/aloha.git/commit/10597fe
Setting to NR to discuss the border changes.
Comment #7
quicksketchThis issue overlaps with #1824492: Icons contrast fails WCAG validation, for which I made similar changes.
Comment #8
quicksketchActually per #6, this was already committed and didn't pass WCAG validation, as I only did the checking today. Can we close up this issue and continue in #1824492: Icons contrast fails WCAG validation?
Comment #9
webchickYep. Thanks, Nate!