This can be seen at https://tugboat-aqrmztryfqsezpvnghut1cszck2wwasr.tugboat.qa/admin/appear...

The text color has a 4.11:1 contrast ratio with the background color. See https://webaim.org/resources/contrastchecker/?fcolor=0D77B5&bcolor=E7EDF1

CommentFileSizeAuthor
#9 hover-blue-10.png205.94 KBandy-blum
#9 hover-blue-20.png207.59 KBandy-blum
#7 tab-hover.png202.8 KBandy-blum
#7 tab-inactive.png208.11 KBandy-blum
#7 tab-active.png204.04 KBandy-blum
#7 all-tabs.png20.29 KBandy-blum
#2 3242469.patch935 bytesmherchel
Olivero___Olivero.png44.35 KBmherchel
Support from Acquia helps fund testing for Drupal Acquia logo

Comments

mherchel created an issue. See original summary.

mherchel’s picture

mherchel
he/him
Primary language English
Location Gainesville, FL, US
CreditAttribution: mherchel at Lullabot commented
Status: Active » Needs review
FileSize
3242469.patch935 bytes

This patch changes the link color from --color--blue-20 (#0d77b5) to --color--blue-10 (#0f6292).

This new color has a contrast ratio of 5.58:1. See https://webaim.org/resources/contrastchecker/?fcolor=0F6292&bcolor=E7EDF1

scorbine’s picture

scorbine CreditAttribution: scorbine at Bounteous commented
Status: Needs review » Reviewed & tested by the community
scorbine’s picture

scorbine CreditAttribution: scorbine at Bounteous commented
Status: Reviewed & tested by the community » Needs work

The contrast passes on the WebAIM website, but the WAVE browser tool is still showing a contrast error. It could be because this passes the AA but not AAA accessible contrast rating.

mherchel’s picture

mherchel
he/him
Primary language English
Location Gainesville, FL, US
CreditAttribution: mherchel at Lullabot commented
Status: Needs work » Needs review

It could be because this passes the AA but not AAA accessible contrast rating.

Drupal core only targets AA

scorbine’s picture

scorbine CreditAttribution: scorbine at Bounteous commented
Status: Needs review » Reviewed & tested by the community
andy-blum’s picture

andy-blum
he/him/his
Primary language English
Location Ohio, USA
CreditAttribution: andy-blum commented
Status: Reviewed & tested by the community » Needs work
FileSize
all-tabs.png20.29 KB
tab-active.png204.04 KB
tab-inactive.png208.11 KB
tab-hover.png202.8 KB

The styles for tab:hover fail color contrast.

mherchel’s picture

mherchel
he/him
Primary language English
Location Gainesville, FL, US
CreditAttribution: mherchel at Lullabot commented
Status: Needs work » Needs review

The hover color is being changed by the base link hover styles, which is going to be addressed in #3231744: Replace Olivero usage of --color--blue-50 in text

andy-blum’s picture

andy-blum
he/him/his
Primary language English
Location Ohio, USA
CreditAttribution: andy-blum commented
Status: Needs review » Reviewed & tested by the community
FileSize
hover-blue-20.png207.59 KB
hover-blue-10.png205.94 KB

Gotcha. Assuming hover styles use blue-20 or blue-10, the hover state contrast passes.

  • lauriii committed 2c2da2b on 9.3.x 
    Issue #3242469 by mherchel, andy-blum, scorbine: Insufficient contrast...

  • lauriii committed 3cadbec on 9.2.x 
    Issue #3242469 by mherchel, andy-blum, scorbine: Insufficient contrast...
lauriii’s picture

lauriii
he/him
Primary language Finnish
Location Finland
CreditAttribution: lauriii at Acquia commented
Status: Reviewed & tested by the community » Fixed

Committed 2c2da2b and pushed to 9.3.x. Also cherry-picked to 9.2.x because Olivero is experimental. Thanks!

Status: Fixed » Closed (fixed)

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