igniteui-webcomponents icon indicating copy to clipboard operation
igniteui-webcomponents copied to clipboard

[Bootstrap] Accessibility / Contrast Issue fixes

Open DiLazarova opened this issue 3 months ago • 0 comments

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

DiLazarova avatar Oct 27 '25 19:10 DiLazarova