Button focus indicator has insufficient color contrast

[Woebin]

Describe the bug
This is a violation of the Web Content Accessibility Guidelines (WCAG) SC 1.4.11 (AA) Non-text contrast

People with reduced vision often have difficulty seeing components and graphics in the interface that do not have high enough contrasts against the background. This includes buttons, form fields, icons, illustrations and diagrams (such as curves and arrows).

The buttons to enter the chat or log in using an external account have custom focus indicators which lack sufficient color contrast against the background.

To Reproduce
Steps to reproduce the behavior:

1. Without selecting a screen name, tab through the chat interface until a button receives focus.
2. See that the focus indicator has insufficient color contrast against the background.

Expected behavior
Graphical objects must have a contrast value of 3:1 against the background, including custom focus indicators. You can use tools such as to measure this.

If you refrain from customizing the focus indicators you don't have to think about this to be compliant, but it's often better to design a custom focus indicator for improved visibility. On the example page the background is light, so making the focus indicator darker would be an intuitive way of solving this issue.

There are many articles that delve further into designing accessible focus indicators, such as this one from Deque.

Server:

• Peertube version: 7.2.1
• peertube-plugin-livechat version: 14.0.0

Desktop:

• OS: MacOS 15.5
• Browser: Google Chrome Version 137.0.7151.120 (Official Build) (arm64)

Additional context
This issue was recorded as part of an accessibility audit carried out by Axess Lab, contracted by HowlRound Theatre Commons.