Skip to content

[Fluent] Accessibility / Contrast Issue fixes #16375

@dkoleva-infra

Description

@dkoleva-infra

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

Metadata

Metadata

Type

Projects

No projects

Milestone

No milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions