Focus outline for links in 'Ways to help' box makes links difficult to read.

[NickColley]

When tabbing into the 'Ways to help' box the contrast between the focus outline and the text is too low at 2.57.

If we were to use the background colour of the box for the text colour the contrast would be improved to at least 5.24.

I would argue to go for a brighter white to ensure a better contrast at 6+

One way to accomplish might be to change the .box a selector to .box a:not(:focus).

I've seen you're using CSS Custom Properties, so that might be another nice way to resolve this. For example by introducing a --focus-text-color variable that can be assigned on the .box.

[tatianamac]

@nickcolley Thanks for submitting this issue. 🙏🏽

@ovlb Is this something that got overlooked into the light-dark mode PR? I felt like we went back and forth in the PR re: this very topic.

[ovlb]

Indeed, we went back and forth on this and @nickcolley sees there is not what is specified. The Firefox Accessibility Dev Tools report as follows:

@nickcolley Can you tell me which browser and OS/monitor you use?

Thanks, Oscar

[NickColley]

I was on Linux, with Google Chrome, using Dark mode. It may be some weirdness with CSS Custom Properties perhaps. Hmm.

I believe there are similar issues with the light theme, they're actually much more severe.

Update: Seeing the issues on OSX Chrome and Firefox.

[ovlb]

@nickcolley Hmm. --clr-accent resolves to pink, but the values browsers implement are specced. Can you have a look into your browser dev tools and post to which values text and background resolve in the end?

Re light mode: Seeing this too. This slipped through our QA. 🙈 I’d say we need a darker shade of pink for the black bg/white text box.