Links in the tour tip body are visually the same as the rest of the text - Claro theme

Applied patch #3 and the links in the tip body are identifiable after applying this patch.Also tip background is changed to white color.

Before patch:

After patch:

RTBC +1

Applied patch #3 and installed the Claro theme. Confirmed that the Tour tip has a white background and that links in the tip body are blue and underlined. Marking RTBC.

+++ b/core/themes/claro/css/theme/tour.theme.pcss.css
@@ -7,10 +7,11 @@
+  color: #222330;
+  border: 1px solid #c5c5c5;
+  border-radius: 0.25rem;
+  background-color: #fff;

Why is this changing the Tour background color to white? This is huge design change in an important component that would need a Claro maintainer's approval. The proposed solution says nothing about it:

Make the links in the tip body blue and underlined, paying attention to make sure there are appropriate hover and focus states.

By doing so (using the default's Claro blue link color), there is clearly not enough contrast to pass WCAG AA. So this means the link color for dark regions needs to be changed. I've created an issue to define the Tour styles and define which steps should be taken here: #3251280: Tour style update.

OK, then thanks for the proposal @thejimbirch ! We'd like to keep the initial designs with the dark background, but the link lack of contrast is clearly an a11y failure and needs to be fixed. We've made this a Claro stable blocker, and I'm updating the priority to Major.

The main problem this has is we lack the definition of #3251278: [META] Designs for dark background layers and its color palette, and it's also related to #3251709: Define Blue scale for Claro. I'll try to solve the Blue color scale ASAP so we can choose an appropriate blue from there and we don't have to define all the dark palette now.

Marking this as blocked by #3251709: Define Blue scale for Claro. I'll post back the correct blue here when the other one is finished.

Setting this as Major.

Since this is a Major bug and a Claro stable blocker, I'm uploading a patch with a quick solution instead of relying on a big design task as designing the Dark Mode palette.

We already had a solution for dark region links on Messages where we chose a yellow with good enough contrast against dark backgrounds:

So I've basically changed the current approach from using the white color (underlined):

To use the same yellow we're using for Messages:

I'm not changing the underline behavior so the default Claro link styles take care of it (links underlined by default, underlined on hover).

The patch for Drupal 10 is working for me, but it failed on the CS tests (I don't know why). I even thought it was a random failure, and queued a retest, but it failed again with the exact same message:

--- Errors ---
1/2 ./themes/claro/css/theme/tour.theme.css 711.59ms
2/2 ./themes/claro/css/theme/tour.theme.pcss.css 28.55ms
CSpell: Files checked: 2, Issues found: 0 in 0 files
error Command failed with exit code 1.

The d10 patch was tested against 9.4.x. Just re-queued for 10.0.x

Full disclosure, I haven't tested this, but did peek at the code.

The color change itself is not enough to distinguish a hyperlink (I'm assuming the links are not underlined). The relevant SC is https://www.w3.org/TR/WCAG20-TECHS/F73.html

Removing the underline and leaving only the color difference for such links would be a failure because there would be no other visual indication (besides color) that it is a link.

Note 1: Red and Pink are the same color (hue) but they have different lightness (which is not color ). So red and pink would pass the requirement for "not distinguished by color (hue) alone" since they differ by lightness (which is not color) - as long as the difference in lightness (contrast) is 3:1 or greater. (e.g. if surrounding text is RED and the link is PINK it would pass. Similarly a light green and a dark red differ BOTH by color AND by lightness so they would pass if the contrast (lightness) difference is 3:1 or greater) before focus or pointing. )

The current color change has a ratio of 1.44:1 (https://contrastgrid.com/?xAxisColors=%23fff%7C%23ffd23f)

Channeling my inner @andrewmacpherson here: Just add a text-decoration: underline;

The color change itself is not enough to distinguish a hyperlink

Agreed! That's why we rely on the browser default styles for links that set an underline for all hyperlinks. See Claro default's behavior for links on /admin/help for example:

That's why I don't think it makes sense to re-define it again just for the Tour module.

And the contrast ratio is way above 4.5:1 using the yellow #ffd23f on top of the Tour background (background-color: rgba(0, 0, 0, 0.8)). See:

OK! I'm pulling down the patch 😆 for a more thorough review!

I'm updating the summary as it doesn't match the current reality. Currently Claro does have underlines within the hyperlinks within the tour module.

I'm leaving the current 'stable blocker' tag and 'major' status for others to remove. I personally don't think this issue is either a stable blocker or major.

This patch applies cleanly and colors the text yellow (screenshot below). The original behavior of having the hyperlink underlined remains.

Committed 71b2c04 and pushed to 10.0.x. Committed Drupal 9 patch to 9.4.x and cherry-picked to 9.3.x because this is a major bug fix and Claro is experimental. Thanks!