search

microsoft / react-native-gallery

This repo contains the react-native Gallery app created by Microsoft
MIT License
154 stars 44 forks source link

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

Open Yajur-Grover opened 2 months ago

Yajur-Grover commented 2 months ago

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 commented 1 month ago

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