Skip to content

[Bootstrap] Accessibility / Contrast Issue fixes #16376

@DiLazarova

Description

@DiLazarova

Continuing our accessibility improvements initiative, we refined color contrasts in several components to ensure better legibility and alignment with WCAG guidelines.
The following changes are made in Bootstrap theme:

1. Calendar:

For the rest of the Components, please check the Bootstrap Design Kit

[light]

  • The week numbers color change to primary.600
  • The week days color change to primary.900

[dark]

  • The week numbers color changed to primary.300
  • The week days color change to primary.200

2. Date Picker:

[light]

  • The week numbers color change to primary.600
  • The week days color change to primary.900

[dark]

  • The week numbers color changed to primary.300
  • The week days color changed to primary.200

3. Expansion Panel:

[light]

  • The subtitle text (description) color changed to grays.700

3. Grids:

[light]

Grid Features/GroupBy Row
The badge text color changed to grays.700
ColumnName text and icon color change to primary.600

[dark]

ColumnName text and icon color changed to primary.300

Grid Features/Toolbar

[light]

Toolbar Title
The toolbar title color changed to grays.700

.Data Grid Item/Cell-Summary

[light] The text color changed to primary.700

[dark] The text color changed to primary.200

4. Hyperlink:
The text color of the hyperlink changed to primary.600

5. List:

[dark]

.List/Items List heading
The text color changed to secondary.400

6. Bottom Navigation:

[dark]

The icon & label colors changed to primary.300

7. Stepper:
Step - horizontal and vertical steps

[light]

The text changed to error.800 in idle, hover & focused states.

[dark]

The text and the indicator background colors in hover state changed to error.400 and in focused state to error.300.
The indicator text color in hover and focused states changed to black.
Focus border in Incomplete, Complete, Invalid and Active States should be grays.400

8. Tree:
.Base Node - The Link Text color changed to primary.600

[light]

.Node Simple use primary 800 for text color for all states
.Node Selection use primary 800 for text color in the marked states

Metadata

Metadata

Type

Projects

No projects

Milestone

No milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions