Reading list contrast too low, even when focused

[aardrian]

Filling out State of CSS Survey 2023:
https://survey.devographics.com/en-US/survey/state-of-css/2023/hfg5V70I2tPvW2i5wgy1V/13

To reproduce:

1. Add an item to your reading list
2. using only the keyboard to navigate, navigate into the reading list

What should happen: The text contrast should immediately improve, just as if I had hovered it with my mouse.

What actually happens: If I am using a keyboard or keyboard proxy (voice, touch, gaze) to move focus into the list, I cannot get the text contrast to improve so I can read it. Ideally, I should not have to interact at all to be able to read it.

More detail:
The reading list by default is partially transparent (via opacity):

.reading-list-summary {
  position: -webkit-sticky;
  position: sticky;
  top: 40px;
  opacity: .3;
  transition: all .3s ease-in;
}

In practice, that makes the text color #5A5C5C on #212424, which has a 2.3:1 contrast ratio.

When the user hovers it, then the text becomes fully opaque (giving it a 12.1 contrast ratio):

.reading-list-summary:hover {
  opacity: 1;
}

This requires a mouse or similar fine pointer.

Potential fix:
Ideally never reduce the contrast. Otherwise, add a :focus-within selector so the opacity changes when a user puts keyboard focus into the list:

.reading-list-summary:hover, .reading-list-summary:focus-within {
  opacity: 1;
}

Platform: Firefox 114 / Windows 11

WCAG failure: This constitutes a WCAG SC 1.4.3 Contrast (Minimum) (Level AA) failure.

Image demonstration:
This image demonstrates the reading list with focus on one of its items versus the same scenario but with the proposed fix.

Finally: I love this feature, BTW. Great way to queue up information for the things that surprise me while I am doing the survey.

[SachaG]

Thanks, great feedback! I actually spend a lot of time this year refactoring the survey app, so going forward it should hopefully become easier to do a good job on keyboard navigation and other accessibility issues.

[eric-burel]

Thanks for this feedback, now fixed. Opacity is 1 on "focus-within" but also "prefers-color-scheme:more" media query.