Insufficient contrast on borders

Prerequisites

• I have searched for duplicate or closed issues
• I have validated any HTML to avoid common problems
• 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

No file or test is named in the issue. Start by locating Bootstrap 5.3's default border-color variables and the components that use them, then compare their borders with the WCAG 2.1 non-text contrast requirement. Done means the default borders provide at least 3:1 contrast against their backgrounds without requiring a user override.