cambiatus/frontend

[Accessibility] [Windows] [Contrast] - "Sim" and "Não" buttons lack adequate focus contrast

Opened this issue · 0 comments

Describe the bug
The "Sim" and "Não" buttons do not meet the required contrast ratio for focus states. The button "Sim" has a contrast ratio of 1.4:1, and the button "Não" has a contrast ratio of 2.1:1 when focused, both of which are below the minimum required contrast ratio of 3:1 for UI components. This makes it difficult for users with low vision to clearly identify the focused buttons, impeding their ability to interact with them effectively.

Severity: High - Insufficient contrast in focus states significantly impacts accessibility, as users with visual impairments may struggle to identify the focused button, potentially blocking interaction with critical elements.

To Reproduce
Steps to reproduce the behavior:

  1. Open the Muda platform in a Windows environment.
  2. Navigate to the page with the "Sim" and "Não" buttons.
  3. Use the tab key to focus on the buttons and observe the lack of sufficient contrast in the focus state.

Expected Behavior
Both the "Sim" and "Não" buttons should have a focus state contrast ratio of at least 3:1 to comply with accessibility guidelines and ensure that users with low vision can identify the focused buttons clearly.

Screenshots
focosimobrigado

focobotaonao

Cambiatus Env you are using
https://muda.cambiatus.io/invite/Pzz98P

Desktop (please complete the following information):

  • OS: Windows
  • Browser: Chrome
  • Version: 130.0.6723.117

Additional Context
This issue violates WCAG 1.4.11 Non-text Contrast, as the focus state of the "Sim" and "Não" buttons does not provide enough contrast to ensure visibility for users with low vision.