Problem/Motivation

When a link is in the hover and active state, it does not have enough contrast.

According to WCAG 2.0, color contrast needs to be 4.5:1 - https://www.w3.org/TR/WCAG20/#visual-audio-contrast-contrast.

Currently, on:

Proposed resolution

Change the color of the hover and active state to a darker color rather than a lighter one. Maybe something like - #005486. It is noticeable darker than the original link color and it is compliant.

CommentFileSizeAuthor
#20 After-patch.png657.89 KBsakthivel m
#20 before-patch.png700.77 KBsakthivel m
#19 2725539-after.png2.29 KBabhijith s
#19 2725539-before.png3.97 KBabhijith s
#18 Screenshot 2021-04-27 at 09.27.07.png126.34 KBgauravvvv
#17 Screen Shot 2021-04-14 at 2.02.42 PM.png3.55 KBmgifford
#15 after_hover.png262.86 KBdjsagar
#15 before_hover.png257.5 KBdjsagar
#5 hover_active_state_does-2725539-5.patch327 bytesBarisW
#4 hover.png113.03 KBBarisW
#4 default.png113.84 KBBarisW

Comments

afemath created an issue. See original summary.

mgifford’s picture

mgifford
he/him
Primary language English
commented

Great. Can you add screenshots? Also foreground/background colors?

Do we need to worry about css gradients or background images too?

afem’s picture

afem commented
Issue summary: View changes
BarisW’s picture

BarisW commented
Status: Active » Needs review
StatusFileSize
new default.png113.84 KB
new hover.png113.03 KB

Great point! I've tried a few combinations and ended up with the darkest variation of blue in the header (#055a8e) - it has a contrast ratio of 7.34:1

Default state

The default link colors

Hover state

The hover link colors

BarisW’s picture

BarisW commented
StatusFileSize
new hover_active_state_does-2725539-5.patch327 bytes

Version: 8.2.x-dev » 8.3.x-dev

Drupal 8.2.0-beta1 was released on August 3, 2016, which means new developments and disruptive changes should now be targeted against the 8.3.x-dev branch. For more information see the Drupal 8 minor version schedule and the Allowed changes during the Drupal 8 release cycle.

BarisW’s picture

BarisW commented
Version: 8.3.x-dev » 8.2.x-dev
Issue tags: +Needs design review
andrewmacpherson’s picture

andrewmacpherson commented

This contrast works well for a11y, so it's just design review that we need now.

#055a8e on #ffffff - contrast 1:7.3 - passes WCAG 2 AAA (great, exceeds out targets)
https://leaverou.github.io/contrast-ratio/#%23055a8e-on-white

#055a8e on #f6f6f6 - contrast 1:6.8 - passes WCAG 2 AA (our target level)
https://leaverou.github.io/contrast-ratio/#%23055a8e-on-%23F6F6F2

Version: 8.2.x-dev » 8.3.x-dev

Drupal 8.2.6 was released on February 1, 2017 and is the final full bugfix release for the Drupal 8.2.x series. Drupal 8.2.x will not receive any further development aside from critical and security fixes. Sites should prepare to update to 8.3.0 on April 5, 2017. (Drupal 8.3.0-alpha1 is available for testing.)

Bug reports should be targeted against the 8.3.x-dev branch from now on, and new development or disruptive changes should be targeted against the 8.4.x-dev branch. For more information see the Drupal 8 minor version schedule and the Allowed changes during the Drupal 8 release cycle.

Version: 8.3.x-dev » 8.4.x-dev

Drupal 8.3.6 was released on August 2, 2017 and is the final full bugfix release for the Drupal 8.3.x series. Drupal 8.3.x will not receive any further development aside from critical and security fixes. Sites should prepare to update to 8.4.0 on October 4, 2017. (Drupal 8.4.0-alpha1 is available for testing.)

Bug reports should be targeted against the 8.4.x-dev branch from now on, and new development or disruptive changes should be targeted against the 8.5.x-dev branch. For more information see the Drupal 8 minor version schedule and the Allowed changes during the Drupal 8 release cycle.

Version: 8.4.x-dev » 8.5.x-dev

Drupal 8.4.4 was released on January 3, 2018 and is the final full bugfix release for the Drupal 8.4.x series. Drupal 8.4.x will not receive any further development aside from critical and security fixes. Sites should prepare to update to 8.5.0 on March 7, 2018. (Drupal 8.5.0-alpha1 is available for testing.)

Bug reports should be targeted against the 8.5.x-dev branch from now on, and new development or disruptive changes should be targeted against the 8.6.x-dev branch. For more information see the Drupal 8 minor version schedule and the Allowed changes during the Drupal 8 release cycle.

Version: 8.5.x-dev » 8.6.x-dev

Drupal 8.5.6 was released on August 1, 2018 and is the final bugfix release for the Drupal 8.5.x series. Drupal 8.5.x will not receive any further development aside from security fixes. Sites should prepare to update to 8.6.0 on September 5, 2018. (Drupal 8.6.0-rc1 is available for testing.)

Bug reports should be targeted against the 8.6.x-dev branch from now on, and new development or disruptive changes should be targeted against the 8.7.x-dev branch. For more information see the Drupal 8 minor version schedule and the Allowed changes during the Drupal 8 release cycle.

Version: 8.6.x-dev » 8.8.x-dev

Drupal 8.6.x will not receive any further development aside from security fixes. Bug reports should be targeted against the 8.8.x-dev branch from now on, and new development or disruptive changes should be targeted against the 8.9.x-dev branch. For more information see the Drupal 8 and 9 minor version schedule and the Allowed changes during the Drupal 8 and 9 release cycles.

Version: 8.8.x-dev » 8.9.x-dev

Drupal 8.8.7 was released on June 3, 2020 and is the final full bugfix release for the Drupal 8.8.x series. Drupal 8.8.x will not receive any further development aside from security fixes. Sites should prepare to update to Drupal 8.9.0 or Drupal 9.0.0 for ongoing support.

Bug reports should be targeted against the 8.9.x-dev branch from now on, and new development or disruptive changes should be targeted against the 9.1.x-dev branch. For more information see the Drupal 8 and 9 minor version schedule and the Allowed changes during the Drupal 8 and 9 release cycles.

djsagar’s picture

djsagar commented
Status: Needs review » Reviewed & tested by the community
StatusFileSize
new before_hover.png257.5 KB
new after_hover.png262.86 KB

HI,

Patch is applied successfully.

Thanks!

larowlan’s picture

larowlan
Location 🇦🇺🏝.au GMT+10
commented
Issue summary: View changes
Status: Reviewed & tested by the community » Needs review

This still needs design review

mgifford’s picture

mgifford
he/him
Primary language English
commented
Issue tags: +color contrast, +WCAG 143
StatusFileSize
new Screen Shot 2021-04-14 at 2.02.42 PM.png3.55 KB

tagging.

To compare the blues
https://contrast-ratio.com/#%23055a8e%20-on-%23018FE2
Only local images are allowed.

gauravvvv’s picture

gauravvvv commented
StatusFileSize
new Screenshot 2021-04-27 at 09.27.07.png126.34 KB

Patch #5, passes the A11y color contrast test.

Still applies in 9.1.
looks good to me.

abhijith s’s picture

abhijith s commented
StatusFileSize
new 2725539-before.png3.97 KB
new 2725539-after.png2.29 KB

Applied patch #5 and it works fine. Adding screenshots below.

Before patch:
before

After patch:
after

RTBC +1

sakthivel m’s picture

sakthivel m commented
StatusFileSize
new before-patch.png700.77 KB
new After-patch.png657.89 KB

Verified and tested patch #5.
Patch applied successfully and looks good to me.

Expected Results:
#055a8e on #ffffff - contrast 7.34 - Passes AAA level for any size text and AA for user interface components and graphical objects
https://leaverou.github.io/contrast-ratio/#%23055a8e-on-white

Actual Results:
#018FE2 on #ffffff - contrast 3.48 - Passes AA for large text (above 18pt or bold above 14pt) and AA for user interface components and graphical objects
https://contrast-ratio.com/#%23018FE2-on-white

Moved to RTBC

sakthivel m’s picture

sakthivel m commented
Status: Needs review » Reviewed & tested by the community

  • lauriii committed 5245bd8 on 9.3.x 
    Issue #2725539 by BarisW, djsagar, mgifford, andrewmacpherson: Hover/...
lauriii’s picture

lauriii
he/him
Primary language Finnish
Location Finland
commented
Version: 8.9.x-dev » 9.3.x-dev
Status: Reviewed & tested by the community » Fixed
Issue tags: -Needs design review

Removing the needs design review tag since this has is such a minor change and this is a nice accessibility improvement, and there was a 5 year window for anyone to provide feedback on the designs.

Removing credits for the duplicate screenshots that don't provide any additional information for the issue.

Committed 5245bd8 and pushed to 9.3.x. Thanks!

Status: Fixed » Closed (fixed)

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