Ensuring Proper Color Contrast for Garland

Don't have time to say much right now, but take a look at Contrast-A.

[Editing to fix name of color tool. Doh!]

That rules me out. But of the color assessment tools I've found, Contrast-A seems to be best suited for a designer to use in building an accessible and aesthetically pleasing palette. Soon I'll post an explanation of how to use it here so anyone with an eye for design who follows this issue can see how to use this free tool to propose reasonable solutions. (That used to say "Later today," but Christmas preparations got away from me.)

Then I'll add the same information to the accessibility wiki you've set up (or some other appropriate place for designers to look for guidance).

subscribe

subscribe

I am sorry, but Drupal 7 can be. As much as I would agree, that it shouldn't - the problems you proposed are very hard to fix, far harder then creating the initial list. But I do love the iniative, we should indeed look more closely into this.

Can you provide screenshots with occurrences that need to be fixed? I want to focus on fixing Seven first.

Hop by IRC sometime, to discuss this - I am unsure if we can truely solve many of these errors.

For example :
The difference between #666666 and #ffff is pretty hard to fix, as it would mean all of our descriptions become very visisble.

The difference between #0074bd and #e0e0d8 ... mean we would choose a diffrent base color for all links?

Edit Shortcuts, has been made very gray for a reason - I can understand it fails tests. I am unsure the trade off, of choosing a higher contrast is in alignment with the useage contrast design decision.

Anyways, come by IRC - we might be able to find a sweet spot where we can actually fix all of these issues. Understandably, the most critical are also the hardest to fix.

Can you provide screenshots?

Mike, my apologies for being absent from this issue for so long. I can make a few suggestions for colors, not based on a background in design but based on my use of Contrast-A to determine the smallest change in color that will produce AAA compliance with WCAG 2.0. Using the hexadecimal values you mentioned in #9 and #10, I get these results, where the numbers in parentheses are the corresponding luminance contrast ratios for people with normal vision and these ratios exceed the WCAG minimum guideline only to the extent necessary to meet that guideline for at least some forms of colorblindness:

• #bbbbbb and #666666: Change #666666.
  • Keeping it pure (or nearly pure) gray:
    • #4c4b4b works if used only for large text (4.52:1)
    • #2d2b2b works if also used in small text (7.20:1)
  • Allowing it to pick up a tinge of red:
    • For large text, #4d4848 (4.68)
    • For small text, #2e2b2b (7.30)
• #ffffff and #666666: Passes for large text (5.74:1), but is used for small text. To fix, change #666666:
  • Keeping it pure (or nearly pure) gray, we need #515050 (8.03:1)
  • Allowing it to pick up a tinge of red, we need #524b4b (8.51:1)
• #0074bd and #e0e0d8: This color pair contrasts fairly well (3.73:1; passes at level AA) for large text, but not even pure white (4.96:1) or pure black (4.23:1) has sufficient contrast to this shade of blue (#0074bd) to pass at AAA for small text. Consider two options:
  • To pass at AA for small text (which is the same as passing at AAA for large text), change the background (#e0e0d8):
    • Keeping about the same tinge of yellow, #f6f6ec works (4.56:1) except for people with an extremely rare form of colorblindness called tritanopia, for whom we can achieve no better than AA compliance for large text with this shade of blue (#0074bd)
    • Removing all yellow, #f4f4f4 works (4.51:1) — again, except for folks with tritanopia
  • Or we can keep the background the same if we do something with that shade of blue:
    • And reach AAA compliance for large text, but only AA for small, with #0164a3 (4.71:1) — again, except for people with tritanopia, for whom this achieves only level AA compliance with large text
    • Or reach AAA compliance for nearly everyone with #004a79 (7.01) — this time, picking up AA compliance for small text and AAA compliance for large text for even the people with tritanopia.
• #5a5a5a and #ffffff: At 6.89:1, this pair is so close to compliance for all text at level AAA that only a very slight adjustment to the gray needs to be made. Make it #505050 (8.06:1) and it will work for everyone.
• #ffae00 and #edf5fa: At 1.68:1, this pair requires the greatest change so far:
  • Assuming we want the nearly white #edf5fa to stay nearly white, the closest yellow with sufficient contrast to pass at level AAA is #5f4000 (8.57:1) — a deep golden brown, hardly the same effect.
  • Assuming we want the yellow to remain the same, the white has to become quite a dark color. At one extreme is a deep blue, #001c2e (9.37:1); at the other, a deep charcoal gray, #171717 (9.65:1).
• #898989 and #ffffff: As with #666666 and #ffffff, we can't lighten the white (#ffffff), so we need to look at darkening the gray. And the minimum required change is the same:
  • Keeping it pure (or nearly pure) gray, we need #515050 (8.03:1)
  • Allowing it to pick up a tinge of red, we need #524b4b (8.51:1)
• #027ac6 and #ffffff: This combination is not terrible — at 4.56:1, it passes at level AAA for large text (level AA for small text) for almost everyone. Again, people with tritanopia will find it difficult to read. To improve the situation:
  • #005b96 (7.15:1) works for everyone but people with tritanopia, who still would see it fairly well (level AAA for large text).
  • #004a7a (9.28:1) reaches level AAA with small text even for people with tritanopia.
• #027ac6 and #edf5fa: It's unlikely that we would want a single shade to morph into two different colors, so let's see what the same adjustments we just made to the blue will do against this very light gray:
  • #005b96 isn't quite dark enough (6.48:1); we would need to darken it to #004674 (8.94:1).
  • #004a7a (8.42:1) almost works, but people with tritanopia will still have trouble unless we darken it to #004674 (8.94:1).

Again, I am making no aesthetic pronouncements. I am merely identifying the colors that will bring this theme into compliance with WCAG 2.0 while making the smallest qualitative change possible to the palette.

Since we are talking about visual changes, it might be easier to just provide screenshots with before / after.

Easier for others, maybe. I'm still fighting that learning curve and don't have the time to dig into the code. I really do wish I could help more, but I am offering the information that I am able to in hopes that it will help people solve the problem.

Too little contrast seems to be endemic not just in Drupal but in modern Web design in general.

Agree that d7 shouldn't, but will likely need to, ship with these colour issues. I notice that this issue is filed against seven. Would it be helpful to file against each core theme that has colour contrast problems to see if we can get more assistance with the issue? Perhaps that will only make it more difficult because the thread will be separeted.

Have you tested Stark as well?

@mgifford wrote: "The site Check My Colours checks contrast ratio, brightness difference & color difference of a given site"

You mention that there are a number of failures in Seven and Garland. Can you please provide us with a little more information about what test or standard is being used? I assume WCAG 2.0 AA, would that be correct?

I'm not set up to do screenshots of a site displaying a number of different color schemes, but I can provide the electronic equivalent of the color chips you can get at the paint store. Each of the attached PDFs is like a set of paint chips for one of the problematic color pairs @mgifford identified in 9 and 10. In each case:

• The name of the file is the respective problematic color pair.
• The first image shows the degree of contrast of that color pair.
• Each of the next images shows the possible fixes I identified in 16 for this color pair.
• If in 16 I mentioned the possibility of varying both colors in a pair, the last image for that pair repeats the original problematic color pair to make comparison somewhat easier.

Taken together, these images show the kinds of changes that will produce WCAG-compliant degrees of contrast. I hope that someone who is more facile than I with theming and Drupal can use this information to create at least one screenshot each of Seven and Garland with these or equally effective fixes implemented.

For those who need visuals, these are the color schemes @mgifford referred to in 21. Each color scheme is named for the corresponding set of color combinations, or "palette," for Garland as obtained from the color module. These color combinations were mentioned in the introduction to this issue.

Each palette includes images I will call "color chips," arranged in this order:

1. The named palette's base color against each of that palette's other colors, in this order:
   • base + link
   • base + header top
   • base + header bottom
   • base + text
2. The link color against the remaining colors, in this order:
   • link + header top
   • link + header bottom
   • link + text
3. The header top color against the remaining colors, in this order:
   • header top + header bottom (Note: We actually want the contrast to be fairly low for this combination. If this contrast level is too high, it will be impossible to choose foreground colors that have sufficient contrast to both the top and the bottom of the header.)
   • header top + text
4. The header bottom color against the text color
5. A series of five chips to show each of the five colors against white

Information in each PDF file explains the symbols used and the color combination's degree of compliance (or failure to comply) with WCAG 2.0. (My apologies if the words and labels in these PDFs are not themselves accessible. I have no control over the tool that created the PDFs and did not have time to remediate them.)

Heh, as much as I appriciate this I think we are all looking for these context - in the Seven theme.

subscribe, can we split off garland, or split off seven and set this issue to Garland theme component?

I have a patch up for review for the "Edit shortcuts" link native to the Shortcuts toolbar here #795268: Shortcut "Edit shortcuts" link has insufficient color contrast ratio.

Would love some review/critique. This is my first time originating an issue and patch. *bundle of nerves*

I don't think we can fix this - its a monumental task requiring a lot of design changes & reviews. We can leave this open but frankly its just too late.

I realize peeps probably don't want to hear that but we should have thought about this 18 months ago, in which case things may have been quite different, however for D7 I think we have to let this go, and simply remove Garland from core in D8.