Color Contrast Issues with Current Issue Queues

• #9FC748 - No longer in Bluecheese
• #9D9D93 - is in _variables.scss:$grey
• #96BC44 - is commented out // Lime Green #96BC44 rgb(150,188,68)
• #668A19 - No longer in Bluecheese
• #56B3E6 - No longer in Bluecheese
• #0D7DC1 - is commented out // Light Navy Blue #0D7DC1 rgb(13,125,193)
• #0678B - is commented out 2X // Dark Blue #0678BE rgb(6,120,190) // Blue links #0678BE
• #FF0000 & #F00 - No longer in Bluecheese
• #777 - No longer in Bluecheese
• #f6f6f2 - is in _variables.scss & styles.css:$pale-yellow: #f6f6f2;

Here's a patch to help get this rolling.

Woops.. Fixed it. Thanks! With all the changes to the summary it was indeed easy to miss the patch.

I'm pretty certain I got the values from http://webaim.org/resources/contrastchecker/ but then paste in the wrong hex code.

The lighter/darker code really isn't fine tuned enough in that Webaim tool.

I updated the Pale Yellow rgb codes too. One concern with $pale-yellow is that I really don't see it as being "pale yellow" now http://www.color-hex.com/color/fafaf7

Not that this is really a change as it didn't look at all yellow to me before.

This tool would probably be better at finding closer color combinations that also meet WCAG 2 AA.
http://contrast-finder.tanaguru.com

I can pick/choose a variety of colors, but really it's hard for me to choose a better one that is accessible without knowing what thought went into the present ones. The Webaim tool is pretty coarse, and there are way better options provided via http://contrast-finder.tanaguru.com - still someone has to choose what's going to look good.

Retrofitting for accessibility always takes a lot more work as we have to second guess what the intentions were.

Ok, here are the remaining color contrast issues:

• The grey #9D9D93 "Upload" button & "Add another item" buttons
• the Blue text #0678BE against the light grey #F6F6F2

But let's also remove the unused clutter:

• Dark Blue #0678BE rgb(6,120,190)
• Lime Green #96BC44 rgb(150,188,68)
• Light Navy Blue #0D7DC1 rgb(13,125,193)
• Blue links #0678BE

And have the names make sense:

• $light-yellow -> $white
• $pale-yellow: #F6F6F2 -> #F9FEC1 (or do you want to have a $light-grey2 instead)
• GrayGrey #9D9D93 rgb(157,157,147) - we should be consistent

Most of the use of $grey is actually associated with borders. That doesn't really matter for accessibility.
Maybe all $grey should be 20% darker as per sass/partials/common/_forms.scss: color: darken($grey, 20%); for greater consistency?
The accessibility problem I initially pointed out was from sass/partials/common/_basic-elements.scss we could just do make that variable darker, but then is that defeating the point of using variables:

    button {
      background: darken($grey, 20%);
    }

Likewise, we could have the same impact here sass/partials/drupalorg/_front.scss:

#front-drupal-stats .inner  {
  border-top: 1px solid $light-grey;
  color: darken($grey, 20%);

And no, I haven't tried this on a dev environment.

Working on Drupal.org dev environments is really frustrating. It's pretty rare that I have time to do it, and when I do I never know when/where to apply changes. I always feel like I'm going to step on someone's work.

We can't apply Bluecheese on SimplyTest.me unfortunately. That would be the easiest.

I'm definitely not making things black & white, but the CSS for Bluecheese really could use a good cleanup. Variables should mean something, even when the colors change.

I really don't care if the background is #F9FEC1 or #FAFAEE or if we change the link color to #0274C5. From a design perspective, the actual light-yellow background would be a huge change (and isn't needed).

But ya, guidelines on how to do this would be nice. These should be pretty simple changes that most folks probably won't even notice (but will matter to folks with low vision).