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

Files: 
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

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.