Contrast between title/slogan and header is too low

I've done some A11y stuff before and would love to pick this up! Lemme, lemme!

Patch Details

The patch I'm uploading was to update the color stops for the <header> element's background gradient. They correct the contrast of both the Title and Slogan elements to a contrast ratior of 4.5:1.

This change brings that part of the page up to WCAG 2.0 Level AA conformance.

The following screenshots make the details more visible.

Colour-Pick Selection Areas

The following screenshot is of the areas that I used the "ColorZilla Color Picker" Chrome addon to "pick" colours from. It includes the hex-colour values from the two areas.

Visual Before and After

The following screenshot is a composition of the "before" and "after" visual appearance of the <header> element. You will note that the gradient is quite a bit darker in appearance. It is a drastic change but it is the bare minimum contrast necessary to conform to WCAG 2.0 Level AA.

Personally speaking I feel it looks quite nice!

Additional Notes

• Please note that the patch includes a change to Bartik Theme's color.inc file as well so that this colour gradient scheme is now the Theme's default.
• This is my very first patch to core. I hope that it meets with the community's standards... Take it easy on the poor ol' noob! :oD
• @mparker17 pretty much held my hand throughout the process of looking through this issue and creating the patch. Many thanks to him!!!

Can we experiment a bit with extending the original dark blue further into the gradient, rather than changing the color. Something like this:

background: linear-gradient(to bottom, #0779bf 70%,#478cc6 100%);

These new colors have less blue and green but the same amount of red, which makes them more of a purple.

@anandps thanks for jumping on this issue. We're working on announcing an effort to clean up issues like this in the automated testing results. So your patch is already a big step in that direction!

Subscribe

anandps, if you incorporate Jeff Burnz's comment into a reroll, I'll review it.

Okay, let's try this...

Isn't this basically removing the gradient on the bg?

@everyone on this issue: Sorry for the huge delay and silence from my side... I'd always assumed I'd be notified about issues I'm interacting with but it turns out that my notification settings were set to off! Fixed that now.

@jessebeach: Sorry about the delay again... Many thanks to @mparker17 for providing the patch update and interdiff!

@Bojhan and @mgifford: I've updated the Issue so that the inline images are visible now (had been waiting for Comment editing to be enabled in order to do this. If you take a look at the inline images, you will see things clearly - the gradient is definitely still there, only, it's using a deeper hue-set of colours. Could

@everyone: I've contacted the original author of the Bartik theme, jensimmons and requested her advice and help. Hopefully her input will allow us to move forward and definitively close this issue with confidence!

Cheers! :o)

Isn't this basically removing the gradient on the bg?

It does make the top 70% pretty much a solid color, certainly not wedded to this, just an idea.

Heres a screenshot showing the original gradient colours, then two darkened alternatives (-15% luminance, and -25 luminance). Basically I convert the hex to hsl and lower the luminance for the whole gradient, then convert it back to hex.

Maybe we can test and find some happy middle ground. Going "too dark" makes the top a bit oppressive and really changes the whole feel of the design. To my mind "too dark" feels a bit serious, whereas Bartik is kind of young and playful in it's original blue.

Here are the actual gradients, sorry I can't test right now as I have no real tools to do so. Note these are not using the 70% solid idea.

-15:
background: -moz-linear-gradient(top, #06649e 0%, #2296de 100%);

-25:
background: -moz-linear-gradient(top, #05598d 0%, #1d85c5 100%);

Hi folks!

Will implement Jeff Burnz's provided gradients and re-run the Chrome contrast tests against them later today.

Thanks for the input Jeff Burnz!

Great, I'll review once you get Jeff Burnz's feedback incorporated. Thanks anandps!

My pleasure @jessebeach!

Mike, just resting this until the next tests are done, so what comes of it.

Update

I've applied the colour changes one at a time as request by @Jeff Burnz in his comment (#15).

Below, I include the exact colour values as sampled in the same way described in my first comment (#3) along with a screenshot of the real appearance and a screenshot of the Chrome A11y Colour Plugin's result.

Findings

At -15% Luminescence

Colour Codes

• Site title: Colour set = foreground:#ffffff, background:#137CBC = pass
• Site slogan: Colour set = foreground:#ffffff, background:#1883C6 = fail

Appearance and Chrome A11y Result

• Visual appearance:
• Chrome a11y result:

With -25% Luminescence

Colour Codes

• Site title: Colour set = foreground:#ffffff, background:#106EA8 = pass
• Site slogan: Colour set = foreground:#ffffff, background:#1475B0 = pass

Appearance and Chrome A11y Result

• Visual appearance:
• Chrome a11y result:

The new patch

As we can see, the test passes when we reduce the luminosity by 25%. Thus, the patch I've attached (drupal8.bartik-theme.2125621-21.patch) uses @Jeff Burnz's 25% reduction in luminescence values.

Conclusion

I feel that we have TWO viable options now: the patch from comment #3 and the patch I'm attaching now. I'd like to defer to the design sense of those who were originally involved with the creation of the Bartik theme. I do feel that the difference between the two options is not very much.

Cheers!

@anandps, name the interdiff file "interdiff.txt" to prevent Testbot from trying to test it. Check out the documentation on Creating an interdiff for more information.

Thanks for the link @marpker17! I'll look into why the apply failed later today.

Should i delete the patch and interdiff files I uploaded and resubmit? I'm not sure how to respond to the System message about the patch not applying...

Let me know of action is needed... If so, I'll reassign the issue to myself and proceed with your input.

Thanks!
Thanks!

@anandps, D8 head has probably changed enough that your patch no longer applies. Check out the documentation for re-rolling patches.

I've rerolled the changes.

anandps, I had a lot of trouble rolling patches when I first started. It takes time to get into a rhythm and get your tools optimized. If you feel like you keep hitting the same wall, let me know and we'll have a look at how you've got your local environment set up. Otherwise, I'll just assume that you'll figure it out with a little trial and error, cool?

Thanks a TONNE @jessebeach!

Yes, the idea of "re-rolling" patches still trips me up a bit. @mparker17 has been helping me quite a bit with this stuff... I think that, in this instance, it may have been the fact that I worked from my Windows+Cygwin setup (as opposed to Ubuntu on my laptop) that may have been part of the problem.

I used the command git diff > PATCH_FILENAME.patch... That's probably the biggest problem.

I need practice!!!

Dunno if this issue or IRC or Skype is the right place to talk about patching. Lemme know what you think.

Thanks!

@everyone...

The latest patch that was re-rolled by @jessebeach has applied successfully. I believe that this issue is only awaiting one final thumbsup from @Jeff Burnz.

I think we can possibly just merge this into core because the final values, though not his preference, were indeed submitted by Jeff. It's unfortunate that the colours will deepen to the point that Bartik isn't as chirpy as it used to be but it does pass WCAG Level AA now which was the objective of this issue.

Shall we merge or wait? Thoughts?

Why do we need more contrast on a decorative element?

Ah, I thought it was about the difference between the top and bottom. I'd vote for going significantly darker with all of it here, we shouldn't make the gradient stronger.

Darker is OK, it may loose that chirpy feel anandps mentions, which is kind of nice about Bartik, definite preference to passing the WCAG requirements, maybe something like:

-moz-linear-gradient(center top , #055A8E 0%, #1D84C3 100%)

What about the slogan?

44: bartik-color-contrast-2125621-44.patch queued for re-testing.

Tests failed because there was a mix of case in the hex values changed.

davidhernandez's patch worked for me. The text is clearer after the patch because of the darker blue.

Pre patch:

Post patch:

Committed cdf25d7 and pushed to 8.x. Thanks!

What an awful visual regression. :(

I can no longer see a gradient at all, and it's much darker.

Might as well rename Blue Lagoon, this isn't even close to the original design.

The original color scheme had #0779bf as the top color and #48a9e4 as the bottom color.

The standard for AA compliance is a contrast ratio of 4.5:1 for normal-sized text and 3:1 for large text.

The contrast ratio for #0779bf is 4.67:1.

The contrast ratio for #48a9e4 is 2.6:1.

The top color would be sufficient contrast even for the slogan, which would be classified as normal-sized text. There's even a little room so that even if the slogan extends into a bit of gradient, it would still pass.

So all that was needed here was to push the color stop for the gradient a bit further down the page, and perhaps pull up the color stop of the lighter color to provide a similar level of contrast from top to bottom. That would have allowed for a similar look and feel, but improved accessibility.

The solution that was chosen results in a color of #115986 next to the slogan. That's a color ratio of 7.5:1, far in excess of what's necessary for AA compliance.

That results in a much darker design and a different look and feel than what was designed for Bartik. That's not a minor matter. That's a decision that impacts the out of the box branding for all of Drupal.

It's really important for people to know that accessibility does not mean bad design. You can create great-looking designs and still be accessible. Telling people, yes Bartik now looks dark and dingy, but hey, it's more accessible is counter to the positive message about accessibility and design going hand in hand.

This change should be reverted, and a different solution chosen that doesn't have such a drastic impact on the look and feel of Bartik. Changing the color stops on the gradient is a simple change that would accomplish that.

Reopening per #56.

@mgifford I probably don't have the time today to re-roll the patch, figure out the appropriate color stops, test the design, set up the screenshots, etc. In the meantime this change should probably be reverted until a new solution is figured out.

Thanks for your work on an important accessibility issue. I just think there are other approaches that could be used that would achieve the same goal.

I hadn't installed Drupal 8 in a couple of days and then got pinged about this issue on IRC so tried it on simplytest.me. The visual difference is definitely quite stark (ha, see what I did there?), and although this sat at RTBC for a number of days, it doesn't look like there was a ton of review on the visual impact of the branding change, only on whether or not the accessibility bug was fixed. I echo others' sentiments that it's great that the accessibility bug is fixed, and I definitely don't want to quash the obvious enthusiasm here, but this patch seems to have introduced a couple of pretty big visual regressions:

1) The gradient that was previously in the design is almost entirely imperceptible now (although I can Firebug the CSS to see it's there, I can't see it with my eyes). I get that the original gradient wasn't designed with a11y in mind, but it nevertheless feels like a pretty fundamental part of Bartik's design.

2) The color got way, way darker, but yet not the same color as the installer background so it's inconsistent.

I'm a bit confused, because the original "after" screenshots in e.g. #3 didn't have nearly this sort of strong visual impact on the design, and I had imagined we'd end up with something like that. It seems like Marc (and Jeff?) suggests the same thing above. Marc also pointed out in IRC that the current contrast ratio is AAA, and there was some confusion over whether AAA or merely AA was sufficient here. Both https://drupal.org/core-gates#accessibility and https://drupal.org/node/2208413 imply AA is sufficient, which should give a lot more options.

So I'm also in favor of a revert, at least for now, with the path to commit it again being:

a) Pursue options around keeping "about" the same visual look and feel, but tightening up the contrast.

b) If that is deemed impossible, bring the colors inline with the installer so at least it's consistent.

c) Let's get sign off this time by Bartik maintainer (which AFAIK would be Jeff Burnz, who's also an accessibility guy so that works well :)) or failing that another person with "design chops," as well as someone from the UX team (looks like Bojhan's been involved) before marking RTBC. If it's as serious a visual change as the patch that was committed, it might need Dries's sign-off as well, since it's a fundamental branding change of the product itself.

So for now, reverted this patch but very supportive of it coming back in a different form as outlined above.

Thanks for the revert, and for the good comments.

Another option that came up in IRC that we might want to look at is switching to the colors used on the installer page.

Dark color on gradient: #106193
Light color on gradient: #1788CF

This is a darker color scheme, but one that is more in keeping with the branding colors. The light color doesn't pass AA, but I'd bet that the point at which the slogan appears would.

Install used a radial gradient rather than a linear one, and I don't think we'd want to switch to that.

It also might work to just move the color stop on the original top color.

Could be worth trying a couple of options here.

Can we also get a better issue title that actually describes the colors we're changing?
That would have helped attract more attention to this sooner (like "We're changing Bartik's blue!").

Also I'm not sure about #106193 and #1788CF, those don't appear in the code base anywhere.
But let's find the actual values and try them.

This issue kinda shows how a lacking style guide, makes for very hard to resolve issues. I understand the revert, but the solution is unclear.

I doubt we will get any closer to a color, that doesn't end up making the gradient very hard. I welcome alternatives, but we might need to look in the direction of adding another bar behind the logo and slogan in order to meet A11Y.

Keep in mind that the installer style never had to account for a11y because its merely a background no text is placed against it. This was an intentional decision.

I've retitled the issue, this seems more accurate and clear. I am not into gaining more uninformed opinions on colors, so this should be fine.

I may have said darker was OK (#40) but not like this - thank-you for reverting this.

I believe the gradient I suggested in #40 is just about perfect, I am sure I tested this and it passed the requirements. The important thing here is that I am not chaining the look and feel, I spent quite some time on those hex values.

You can try the installer colors, however the darker hex value has 3 times as much red in them as the original and this is what I have tried to steer away from - rather keeping to the original RGB values. The difference is 0.10 L (luminance) and that is all. yes it dulls it down a tad, but it works IMO and keeps very much the same feel overall and almost the same gradient.

@mdrummond re #56 - see comment #4, precisely what I originally proposed. We tried to make this work, but it kind of obliterated the gradient a bit too much, it could work with some messing about with different luminance values over the original RGB. I avoided that discussion to avoid this issue getting to 200 comments without agreement.

@67, precisely, this is a contrast issue, so lets alter the contrast - not the hue - which is pretty much what I have been saying the whole time.

I also ran through the contrast checkers for the values in #40 and got the same results as mgifford. Everything I sampled near text passed for AA. I also did the colors from the installer CSS, and those passed, though Jeff prefers #40. That patch will probably fail testing due to the same case-sensitivity issue. If it does I can upload another patch.

I think the new version looks a lot better. Same hue, visible gradient. Yes, it's darker, but it's in keeping with the previous visual style.

Would be good to get Jeff Burnz's sign-off before we RTBC this, but this is a good improvement. Thanks!

Screenshot please?

Are there any further objections to this? The color in the last patch passes the contrast test, and is based on Jeff's suggestion.

Sometimes issues just need a bump :)

Here are before and after screenshots:

Before:

After:

And this more clearly shows the difference between #50 and #74:

Awesome, this looks much better now. Thanks so much for the screenshots to show the difference.

Committed and pushed to 8.x. Thanks!