Skip to content

[Bug]: Update High Contrast Colors #25995

@redongreen

Description

@redongreen

Library

React Components / v9 (@fluentui/react-components)

System Info

https://master--628d031b55e942004ac95df1.chromatic.com/?path=/docs/theme-color--page

Are you reporting Accessibility issue?

no

Reproduction

https://master--628d031b55e942004ac95df1.chromatic.com/?path=/docs/theme-color--page

Bug Description

Context

Our high-contrast colors were updated by our accessibility team member Ben Truelove.

To-do

Update the current/default Fluent V9 high-contrast colors to the latest HC ramp.

  • hcHyperlink from #FFFF00 to #75E9FC
  • hcDisabled from #3FF23F to #A6A6A6
  • hcHighlight from #1AEBFF to #8EE3F0
  • hcCanvas from #000000 to #202020
  • hcCanvasText from #FFFFFF to #FFFFFF
  • hcHighlighText from #000000 to #263B50
  • hcButtonFace from #FFFFFF to #202020
  • hcButtonText from #000000 to #FFFFFF

Add an additional high-contrast "desert" ramp.

  • hcHyperlink #1C5E75
  • hcDisabled #676767
  • hcHighlight #903909
  • hcCanvas #FFFAEF
  • hcCanvasText #3D3D3D
  • hcHighlighText #FFF5E3
  • hcButtonFace #FFFAEF
  • hcButtonText #202020

image

I expect there to be accessibility warnings when implementing this. Please tag @redongreen for review and any questions.

Logs

No response

Requested priority

Normal

Products/sites affected

Fluent 2 WEB UI

Are you willing to submit a PR to fix?

no

Validations

  • Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.
  • The provided reproduction is a minimal reproducible example of the bug.

Metadata

Metadata

Type

No type

Projects

No projects

Milestone

No milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions