Enhance The Accessibility Of Bootstrap 5 When Hight Contrast Is Activated On Windows

Preview:

Description:

Many standard Bootstrap 5 components face visual challenges when Windows users activate High Contrast themes.

The Bootstrap Forced Colors CSS library is designed to address this issue by using the forced-colors: active media query. It applies specific styles to improve contrast and visibility when the forced-colors mode is active.

This library fixes contrast problems in UI components like accordions, badges, buttons, and carousels. It improves focus states, adjusts color displays for disabled elements, and resolves visibility issues for placeholders, popovers, and tooltips. The library also enhances the appearance of progress bars, tables, and other UI elements in high contrast mode.

How to use it:

1. Download the bootstrap-forced-colors.min.css file and place it in your Bootstrap project’s head section.

<link rel="stylesheet" href="/css/bootstrap-forced-colors.min.css" media="screen and (forced-colors: active)">

2. Directly import the CSS into your Bootstrap project’s main CSS file:

@import 'bootstrap-forced-colors.min.css';

FAQs:

Q: What is forced colors?
A: Forced colors is a feature in some operating systems, including Windows High Contrast mode, that enforces a specific color palette on applications and websites to improve accessibility for users with visual impairments.

Q: How to turn on High Contrast on Windows?
A: There are several ways to enable High Contrast mode on Windows. Here’s a simple method:
1. Go to Settings > Ease of Access > High Contrast.
2. Choose a desired high contrast theme and click Apply.

Q: Does Bootstrap Forced Colors CSS affect normal color schemes?
A: No, the styles only apply when forced-colors mode is active, so they won’t affect your site’s appearance under normal conditions.

Changelog:

v1.0.7 (07/18/2024)

• Improved Range and Switch styles
• Display disabled form labels as GrayText