Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Accessibility Error : Contrast problem on interactive components #2324

Open
3 tasks done
SimonF30 opened this issue Oct 18, 2023 · 1 comment
Open
3 tasks done

Accessibility Error : Contrast problem on interactive components #2324

SimonF30 opened this issue Oct 18, 2023 · 1 comment

Comments

@SimonF30
Copy link

Prerequisites

Describe the issue

On all form fields, the complete border does not have sufficient contrast.

The border color is #cccccc while the adjacent color is #fffffff. Which makes a contrast of 1.6:1

The contrast ratio must be at least 3:1.

To validate the criterion, the color of the border a #666666 can be a clue.

Reduced test cases

Example page on boosted : https://boosted.orange.com/docs/5.3/forms/overview/#overview

Invalidates the WCAG criterion https://www.w3.org/WAI/WCAG21/Understanding/non-text-contrast.html

What operating system(s) are you seeing the problem on?

Windows

What browser(s) are you seeing the problem on?

Firefox

What version of Boosted are you using?

5.3.0

@SimonF30 SimonF30 added the bug label Oct 18, 2023
@julien-deramond
Copy link
Member

julien-deramond commented Oct 18, 2023

Thanks for opening this issue @SimonF30
We're going to check with the ODS a11y experts and designers to see how we can enhance this contrast ratio while keeping the logic of colors through the whole framework.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

No branches or pull requests

2 participants