Insufficient contrast on borders

[xi]

Prerequisites

• [X] I have searched for duplicate or closed issues
• [X] I have validated any HTML to avoid common problems
• [X] I have read the contributing guidelines

Describe the issue

WCAG 2.1 requires a contrast of 3:1 for non-text content. Many elements, e.g. form inputs or checkboxes, mostly consist of borders, at least in some of their states. It is therefore important that the border color has sufficient contrast to the background.

#888888 would have sufficient contrast to white. Bootstrap 5.2 uses #ced4da, which only has a contrast of 1.49 to white. Bootstrap 5.3 takes this even further by using #dee2e6 which only has a contrast of 1.3 to white.

I do not have any vision impairments that I know of, but to me these borders are practically invisible (depending on the lighting conditions). I strongly recommend to revert at least to the level of Bootstrap 5.2.

Bootstrap 5.3 introduces variables for the border color, so a workaround would be to set --bs-border-color: #888888.

Reduced test cases

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

Linux

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

Firefox

What version of Bootstrap are you using?

5.3.0-alpha3

[raghav1030]

is the issue still open ? if so I would very much like to contribute to it?

[ChellyAhmed]

Hello, Thank you @xi for opening this issue. I also think it is relevant to consider the contrast ratio for the border colors. I used Adobe Color tool (https://color.adobe.com/create/color-contrast-analyzer) for double-checking the contrast. As you mentioned a 1.3:1 to white is not recommended. The lightest color to achieve a ratio of 3.01 : 1 that was suggested by the same tool would be #929598. But I am not sure about which colors we are allowed to use in Bootstrap in case we change the color. Even if we do so, will this mean that we need to update the colors of other elements?

[xi]

Reacting to https://github.com/twbs/bootstrap/pull/38489#issuecomment-1518506999:

Let's keep the PRs at bay for now and discuss any potential changes in the issue. I could see us darkening things a little, but this is too much

I think this regression happened in fc3f4b67:

• $input-border-color was changed from $gray-400 to var(--border-color) which defaults to $gray-300
• the color in $form-check-input-border was changed from rgba($black, .25) also to var(--#{$prefix}border-color)

I see two options to fix this:

• Add a new CSS variable --input-border-color and set it to $gray-400
• Change --border-color to $gray-400

@mdo which option do you prefer?

Btw, I also checked the contrast for dark mode (#495057 on #212529) and it fares much better: 1.88 is still too low, but much better than the contrasts in light mode.

[ChellyAhmed]

Hello @xi Thank you for mentioning that the colors changed from Bootstrap 5.2 to 5.3 resulting in a non-recommended contrast ratio. But I think it is relevant to check why the colors were changed in the first place so we know if changing color is allowed, and the side effects of such a decision. Do you have any input about that?

[RobineSavert]

Please a fix for this, as the checkboxes are now almost not visible in light mode

[jprante]

Please, a quick fix is needed. Light mode is almost unusable!