[Bug]: createDarkTheme and Theme Designer v9 cannot create accessible dark theme

[mark-wiemer]

Library

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

System Info

System:
    OS: Windows 11 10.0.22631
    CPU: (8) x64 AMD Ryzen 3 3100 4-Core Processor      

    Memory: 6.31 GB / 15.95 GB
  Browsers:
    Edge: Chromium (127.0.2651.74)
    Internet Explorer: 11.0.22621.3527

Are you reporting an Accessibility issue?

yes

Reproduction

https://github.com/mark-wiemer/mark-wiemer-com/blob/main/src/App.tsx

Bug Description

Actual Behavior

1. Go to old v9 theme designer with contrast checks
2. Change to dark theme
3. Choose any key color, hue torsion, and vibrancy (the defaults work fine: #0F6CBD, hue torsion 0, vibrancy 0)
4. Note that there are multiple contrast issues

Expected Behavior

There are no contrast issues for the default theme. Also, it should be possible to create an accessible theme with at least one color of every hue. No matter where on the "color bar" the user selects, there is some corresponding color in the "color rectangle" that creates a dark theme without accessibility issues.

Related

• Fluent v9 dark theme is not accessible mark-wiemer/mark-wiemer-com#22

Logs

No response

Requested priority

Blocking

Products/sites affected

markwiemer.com

Are you willing to submit a PR to fix?

yes

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.

[emmayjiang]

Hello! The theme builder is just a scaffolding tool to get you started, and the contrast checker helps you identify colors that will need adjusting. It's up to the user to make necessary modifications as they can't be done programmatically. That can be done by editing the assigned value via the dropdown in the contrast checker or under 'All tokens'.

[mark-wiemer]

Ah, I see! I didn't know you could modify those values, somehow I missed that :) thanks for the advice, closing this one as solved