Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Example page becomes mostly unreadable when High Contrast Theme Mode is enabled. #486

Open
Yajur-Grover opened this issue Aug 26, 2024 · 1 comment
Assignees
Labels
Area: Accessibility Area: Fabric Parity: Fabric vs. Paper RNW Fabric does not look or behave like RNW Paper
Milestone

Comments

@Yajur-Grover
Copy link
Contributor

Part of the accessibility testing plan is the following step:

Turn on Contrast Themes: Accessibility -> Contrast Themes > Choose Aquatic (similar to High Contrast Black) theme or Desert (similar to High Contrast White) theme

  • Does the page look good?
  • Is it hard to read any of the text (because the color contrast isn't good)?
  • Is there sufficient contrast between elements (i.e. are there any elements that are black on black, similar color on similar color)?
  • Choose black theme or white theme (whichever one you haven't shown before)

When turning on the 'Aquatic` high contrast theme setting, most of the example page becomes unreadable - the background of the page goes from white to a very dark grey.

Screen recording of scenario: Link

Screenshot of Fabric Gallery example page in 'Aquatic' contrast mode:
image

@jonthysell
Copy link
Contributor

There are PlatformColors that support themes / high contrast that you should be using to stylize the example controls.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Area: Accessibility Area: Fabric Parity: Fabric vs. Paper RNW Fabric does not look or behave like RNW Paper
Projects
Status: No status
Development

No branches or pull requests

6 participants
@jonthysell @chrisglein @Yajur-Grover and others