Currently on the Getting Started page, with the "rebuilding the search index message" we can see a good example of the discrepancy in the theme colors, there are 5 different shades of green being used which is far from pleasing to the eye.
redesign-green-hues.png
(Note the number associated with the 'H')
I see the current green color used for buttons and on the "Step 1" green arrow, of the Getting started page is what is called in Latin America a 'verde-maduro' mature green. Others might refer to this as baby poo green; rather, think of the color of plants as they fade throughout the year. They yellow-green is a sign in the fruit and plant world that the plant is reaching then end of maturity and is starting to cycle down, and will soon progress to yellow, brown etc. This doesn't really match up with where Drupal is in its lifecycle, so I suggest a closer look at this detail.
I could imagine addressing the issue in one of two ways:
The better option, IMHO, would be to replace baby-poo green with something fresh. Someone could research this further and standardize on a green that maintains a little hair of the yellowish hue, but is more similar to the theme's default Message background color.
The files attached here are all the same size, meant to be opened in tabs, and useful for rapid switching between them to see the differences.
| Comment | File | Size | Author |
|---|---|---|---|
| #19 | bluecheese.patch | 1.83 KB | drumm |
| #18 | before.png | 73.33 KB | drumm |
| #18 | after.png | 73.91 KB | drumm |
| #3 | redesign-green-issue-status.png | 240.2 KB | jwilson3 |
| #2 | redesign-green-tabs.png | 60.83 KB | jwilson3 |
Comments
Comment #1
jwilson3Note that the green hues in alternative1.png attempt to standardize around hues of 95° to 100° .... for those that would point out the discrepancies, no, its not perfect :P But anyway, its just a mockup.
Comment #2
jwilson3Another case of clashing green, with secondary tab, see attachment.
Comment #3
jwilson3The green background for completed issues also clashes with the current color hue.
Comment #4
Amazon commentedUpdated issue to link to the correct path for the first image link. redesign-green-hues.png
Comment #5
drummIssue statuses are a whole separate issue, #936926: Update color scheme for status-based issue tables and issue link filter.
Do these greens meet accessibility standards? If we are changing them, they need to, see #941372: Improve text contrast - some colors don't meet WCAG criteria.
Comment #6
verta commentedAlternative #1 is my preference, it seems the more "serious looking" option, #2 being lighter is less preferable. Thanks for the screen shots.
Comment #7
drummWe aren't necessarily looking to be serious, we still have the Druplicon. Here is a bunch of stuff about branding; https://infrastructure.drupal.org/drupal.org-style-guide/brand.html
Comment #8
grendzy commentedsorry folks for the cross-posting, I'm getting confused with the redesign / bluecheese queues being separate.
Here are the examples from the other issue:
Comment #9
drummComment #10
shyamala commentedThe Main Colours that fail while using the Juicy Studio toolbar's Colour Contrast Analyser on Drupal.org HOME PAGE are as below. Each of these are associated with multiple Elements and Styles. Click here for a report of the same from the Analyser with associated details.
Colour: #0678be Background: #ffffff
Colour: #0678be Background: #56b3e6
Colour: #ffffff Background: #56b3e6
Colour: #222222 Background: #56b3e6
Colour: #000000 Background: #56b3e6
Colour: #ffffff Background: #ffffff
Colour: #9d9d93 Background: #ffffff
Comment #11
jwilson3Note that the Jucy Studios themselves state that: The AERT algorithm was never a recommendation, and WCAG 2.0's luminosity contrast algorithm is recommended instead.
http://juicystudio.com/services/luminositycontrastratio.php
Looking at the document linked in comment #10, a non-trivial amount of the yellow elements fail on AERT, while still passing on WCAG 2.0's luminosity contrast algorithm. So I'm not sure that that document should not be the baseline for which to compare against. As the document linked in #10 was an image a mile long, i didn't attempt to try to find the specific colors identified in comment #10 to see which, if any, of them fit this case.
Maybe a purely luminosity-based test would make this issue more attackable? Perhaps making an HTML version of that page would be useful for tracking down the specific lines referenced (you can append .txt to the end of the file to enable upload).
Comment #12
jwilson3I just ran the seven color-combination instances mentioned in #10 through the luminosity test by hand and, aside from the fact that none of these are green, the ones marked in bold fail.
1. [PASS] Colour: #0678be Background: #ffffff
2. [FAIL] Colour: #0678be Background: #56b3e6 (dark blue on blue, where is this actually used???)
3. [FAIL] Colour: #ffffff Background: #56b3e6 (white on blue)
4. [PASS] Colour: #222222 Background: #56b3e6 (dark grey on blue)
5. [PASS] Colour: #000000 Background: #56b3e6 (black on blue)
6. [FAIL] Colour: #ffffff Background: #ffffff (intentional?)
7. [FAIL] Colour: #9d9d93 Background: #ffffff (light grey on white)
Its really odd that black on blue passes, but white on blue fails; I actually find the white on blue easier to read.
I'm going to execute this test by hand on the green colors in the attached file originally reported.
Comment #13
jwilson3Get Started + Status message
Greens identified on Get Started page (http://drupal.org/files/issues/redesign-green-hues.png), from top to bottom:
1) [FAIL] white on dark green (Color: #fff, Background: #96b73f) Top part of duo-toned Search btn in site header.
2) [FAIL] white on dark green (Color: #fff, Background: #8caa3b) Bottom part of duo-toned Search btn in site header.
3) [PASS] dark grey on lt green alt (Color: #222, Background: #D4EFCC) Status Message.
4) [FAIL] dark green on lt green theme (Color: #839c29, Background: #e9f7b6) Get Started page, first column 'Download Drupal' header.
5) [FAIL] white on dark green (Color: #fff, Background: #8fbf38) Top part of duo-toned Download Drupal button on Get Started page.
Tab navigation
Greens identified in tabs on User profile edit pages (http://drupal.org/files/issues/redesign-green-tabs.png), from left to right, more or less:
1) [FAIL] green on white (Color: #96BC44, Background: #fff) Inactive top-level tab item.
2) [FAIL] green on light green (Color: #96BC44, Background: #E6FCB6) Active top-level tab item; inactive secondary-level tab.
2) [FAIL] white on green (Color: #fff, Background: #96BC44) Tab item hover state; active secondary-level tab.
Note that of the tests listed here, the single one that passes is the status message, which also happens to be the only the only one that lies outside the color guidlines for d.o redesign).
Comment #14
mgiffordComing here from http://drupal.org/node/953314#comment-3888154
Comment #15
cliffI'm quite pleased to see so many contributors to Drupal putting their knowledge of the need for adequate color contrast to good use. What do we need to do to get this accessibility problem resolved?
Comment #16
mgiffordCan we build a diff to Bluecheese's existing CSS to address these problems? I'm not familiar enough with the process for bringing changes into this project.
Comment #17
drummI'd like to pick this back up, starting with the local task links under the page title. For that, and everything else, please suggest new colors to try out.
Comment #18
drummI decided to take on the local tasks. Attached are before and after screenshots.
In addition to swapping the colors, I cleaned up the CSS quite a bit. Some browser testing would be appreciated. http://marketplace-drupal.redesign.devdrupal.org/hosting/enterprise is a dev site with the changes.
Comment #19
drummAnd for completeness, here is a patch.
This issue will be re-opened after this round of work for other problem areas. http://drupal.org/make-drupalorg-awesome is where to get started helping. But, all that is really needed is good colors choices to replace what we have.
Comment #20
drummCommitted and deployed that round of changes.
Comment #26
drumm#2227359: Remove the extreme focus on the "Update this issue" button removed the last bit of the old greens. I think we can call this done now.