"Back to Top" link focus indicator not discernible against dark background

[SaraSoueidan]

The "Back to Top" link’s focus indicator becomes hard to discern when the link is positioned atop of the dark footer. The color contrast is too low and does not meet WCAG requirements.

Not focused:

Focused:

Contrast ratio:

It looks fine when it receives focus with the white background behind it.

Then again, the link only receives keyboard focus after tabbing through the page’s links all the way down to the footer. As such, it will almost always be positioned above the footer when it does receive focus.

The only way I could tell where my focus was when I tabbed to it was via the URL shown in the status bar.

A possible way to avoid this is to use a "double outline" (one light outline, and one dark outline) when it receives focus, so that it stands out on both light and dark backgrounds.

WCAG success criteria:

• WCAg 2.1 Success Criterion 1.4.11 Non-text Contrast
• WCAG 2.2 Success Criterion 2.4.11 Focus Appearance (Minimum)