After Dries himself noticed that the links are hard to see in error messages in one of Bartik's color schemes, Jeff Burnz and I took a look at this theme more carefully. We discovered that the default link color of Bartik has too little contrast, even to white, to conform with WCAG 2.0 at Level AA. Using Contrast-A, I analyzed the default link color's contrast against three backgrounds:

  • white
  • featured content
  • tryptech

and the same in the footer.

Screenshots of those analyses are attached. Only in the footer does the link color have adequate contrast. In each of the other three cases, the link color needs to be substantially darker to pass at WCAG 2.0 Level AA. If we were to make this link color just a bit darker, it would pass, and it's likely that Dries wouldn't have found the links hard to read in that screenshot. I've also attached a couple of screenshots that show a fairly saturated blue of that hue that passes (hex 0C669E) and about the least saturated blue of that hue that would pass (366C8D). In the top row of "chips" at lower left, I show a range of colors between these.

To make the default color scheme of Bartik accessible at WCAG 2.0 Level AA, we have two choices:

  • Change that color to a shade in the range demonstrated in these attachments.
  • Keep the color as it is, but add an easily seen (which means "high-contrast") switch that would allow even an anonymous user to adjust the color scheme to a high-contrast scheme.
Support from Acquia helps fund testing for Drupal Acquia logo

Comments

Jeff Burnz’s picture

Status: Active » Needs review
FileSize
87.47 KB
87.64 KB
1.08 KB

I've tested with both the link colors suggested by Cliff and to be frank the hues are not quite right for Bartik and they do not sufficiently contrast with the text color (#3b3b3b) to make links easily discernible from the surround text. This can be a bit of problem when working with blue in general.

I've tested with another hue #0071B3 and added some screenshots to show the different to the current default of #288cc9 -I actually think #0071B3 looks better.

Hues:
#0071B3
R:0
G:113
B:179

#288CC9
R:40
G:140
B:201

#288cc9 (current default)

blc-288CC9.png

#0071B3

blc-0071B3.png

mgifford’s picture

Status: Needs review » Reviewed & tested by the community

This is a simple change that resolves the colour contrast issues identified here.

Cliff’s picture

Thanks, Jeff! Looks like we have a solution!

Dries’s picture

Status: Reviewed & tested by the community » Fixed

Committed to CVS HEAD. Thanks.

Jeff Burnz’s picture

WOW, awesome, fantastic, I'm jumping up and down here, really really good :)

Status: Fixed » Closed (fixed)
Issue tags: -Accessibility

Automatically closed -- issue fixed for 2 weeks with no activity.