IgniteUI
[Fluent] Accessibility / Contrast Issue fixes
Continuing our accessibility improvements initiative, we refined color contrasts in several components to ensure better legibility and alignment with WCAG guidelines.
Affected are the following components in Fluent:
- Bottom Navigation
- Calendar
- Date Picker
- Grid
- List
- Stepper
Bottom Navigation:
[Dark mode]
- icon & text - changed to primary.300
Calendar:
[Light mode]
- week numbers text - changed to grays.700
- week days text - changed to grays.700
- inactive days text - changed to grays.700
[Dark mode]
- week numbers background - changed to grays.100
Link to calendar handoff.
Date Picker:
[Light mode]
- week numbers text - changed to grays.700
- week days text - changed to grays.700
- inactive days text - changed to grays.700
[Dark mode]
- week numbers background - changed to grays.100
Grids:
[Light mode]
Grid Features/Group Area - connector icons color - changed to grays.600 Grid Features/GroupBy Row - badge text - changed to grays.700 Grid Features/Toolbar - toolbar title - changed to grays.700 Grid Item/Cell-Summary - text color - changed to primary.600 Grid Item/Data Grid-Column - cancel icons - changed to grays.600
[Dark mode]
Data Grid Item/Cell-Summary - text color - changed to primary.300
List:
[Light mode]
List heading - text color - changed to secondary.700
Stepper:
[Dark mode]
Type: Invalid Normal State - text color - changed to error.50 Type: Invalid Hover State - text color - changed to rror.50 Type: Invalid Focus State - text color - changed to error.50 Type: Focus State - background opacity of 50% - changed to background opacity 40%
Link to Fluent UI Kit
