📚 Documentation: poor contrast focus indicators on buttons [a11y][TheA11y100]

[GrahamTheDevRel]

💭 Description

Issue

Focus indicators on buttons are barely visible, the contrast with the background should be improved.

Why it matters

People navigating via keyboard rely on focus indicators to see where they are on the page. Without these it is easy to get lost when tabbing through the page.

Suggested fix

Focus indicators should have a contrast ratio with the background of at least 3:1.

Find a suitable colour using the WebAim colour contrast tool.

One colour that could work is #fd366ebb if needing to use opacity.

Relevant Success Criterion WCAG

WCAG focus visible
WCAG focus appearance

Additional Notes

Good first issue, needs fixing site-wide.

Found on stream on 2023-10-25

👀 Have you spent some time to check if this issue has been raised before?

• I checked and didn't find similar issue

🏢 Have you read the Code of Conduct?

• I have read the Code of Conduct

[Arindam200]

I wouldlovetoworkonthis! Can you please assign this to me?

[Emmarie-Ahtunan]

Will you assign this one to me, please? Web Accessibility is my thing. Thanks.

[TorstenDittmann]

This needs some insight from the design team before I can assign someone 👍🏻