The toolbar sub-menu links do not have enough color contrast per WCAG 2.0 requirements.

This was found by a Drupal accessibility testswarm: http://drupala11y.org/error/1f2879b4-2336-414c-8281-bb05f66c4741

CommentFileSizeAuthor
#7 color.png82.67 KBcorbacho
#5 drupal.toolbar_submenu_color_contrast_2036239_5.patch416 bytesmgifford
PASSED: [[SimpleTest]]: [MySQL] 59,882 pass(es). View
#1 drupal.toolbar_submenu_color_contrast_2036239_1.patch392 byteskevee
FAILED: [[SimpleTest]]: [MySQL] Unable to apply patch drupal.toolbar_submenu_color_contrast_2036239_1.patch. Unable to apply patch. See the log in the details link for more information. View
Members fund testing for the Drupal project. Drupal Association Learn more

Comments

kevee’s picture

FileSize
392 bytes
FAILED: [[SimpleTest]]: [MySQL] Unable to apply patch drupal.toolbar_submenu_color_contrast_2036239_1.patch. Unable to apply patch. See the log in the details link for more information. View

Attached is a fix that adheres to AAA compliance with WCAG.

mgifford’s picture

Status: Active » Needs review

Why did you go to AAA rather than just AA? According to
http://webaim.org/resources/contrastchecker/

#707070 is fine against #fff

If we can meet AAA, great, but that hasn't been our goal.

mgifford’s picture

Status: Needs review » Needs work
Issue tags: +accessibility

The last submitted patch, drupal.toolbar_submenu_color_contrast_2036239_1.patch, failed testing.

mgifford’s picture

Status: Needs work » Needs review
FileSize
416 bytes
PASSED: [[SimpleTest]]: [MySQL] 59,882 pass(es). View

Reroll

mgifford’s picture

corbacho’s picture

Status: Needs review » Reviewed & tested by the community
FileSize
82.67 KB

The patch applies nicely.

Almost no difference, but I think it's true that is more readable with that extra bit of contrast.
And still the bold font-weight of the :active element is very noticeable.

color.png

Notice that to achieve the AAA (7:1 contrast) would have been enough #595959 against the background #ffffff

mgifford’s picture

Excellent, thanks for the nice, clear comparison!

alexpott’s picture

Issue summary: View changes
Status: Reviewed & tested by the community » Fixed

Committed a2a4e8f and pushed to 8.x. Thanks!

mgifford’s picture

Issue tags: +Green by 2014, +color contrast

Just tagging. Great that this is already fixed in Core!

Status: Fixed » Closed (fixed)

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