Orange-OpenSource/Orange-Boosted-Bootstrap

Accessibility Error : Contrast problem on interactive components

SimonF30 opened this issue · 1 comments

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

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.