search

pwa-builder / PWABuilder

The simplest way to create progressive web apps across platforms and devices. Start here. This repo is home to several projects in the PWABuilder family of tools.
https://docs.pwabuilder.com
Other
2.84k stars 292 forks source link

[Visual Requirements - PWA Builder - PWA Builder Featured Store]: Luminosity ratio of "Install Components" placeholder of search edit field is '3.0:1' which is less than required i.e. 4.5:1 #830

Closed Priyanka-Chauhan123 closed 4 years ago

Priyanka-Chauhan123 commented 4 years ago

User Experience: If a minimum luminosity contrast ratio of 4:5:1 is not provided between text and its background, it would be difficult for people with moderately low vision to read the text. Good luminance contrast accommodates diverse color deficiencies and provides contrast that is independent of color perception.

Test Environment: OS: Windows 10 build 19608.1006 Browser: Edge - Anaheim - Version 85.0.545.0 (Official build) dev (64-bit) URL: https://pwabuilderfeatures.z22.web.core.windows.net/ Tool: Color contrast analyzer

Repro Steps:

  1. Open URL: https://pwabuilderfeatures.z22.web.core.windows.net/ in Edge Anaheim dev browser.
  2. Pwa builder components page will open.
  3. Navigate to "Install component..." place holder text of the search edit field.
  4. Check the color contrast ratio of the above placeholder text.
  5. Observe the issue.

Actual Result: Luminosity ratio of "Install Components" placeholder of search edit field is '3.0:1' which is less than required i.e. 4.5:1

Expected Result: Luminosity ratio of "Install Components" placeholder of search edit field should be minimum 4.5:1.

MAS Reference: https://microsoft.sharepoint.com/:w:/r/teams/msenable/_layouts/15/WopiFrame.aspx?sourcedoc={a73546c7-765f-489c-b18f-afb659fe99e6}

Note: This issue is also repro for below controls present on the same page:

  1. Color contrast ratio of "Add that special something to supercharge your PWA. These cross-platform features can make your website work more like an app" text is "3.4:1". Attachment added.
  2. Color contrast ratio of "install app" button text is "4.3:1". Attachment added.

Install app Install Component Add that

ghost commented 4 years ago

Hello Priyanka-Chauhan123, thank you for opening an issue with us!

I have automatically added a "needs triage" label to help get things started. Our team will investigate the issue and help solve it ASAP. Other community members may also look into the issue and provide feedback šŸ™Œ

ghost commented 4 years ago

This issue has been marked as "needs attention šŸ‘‹" due to no activity for 15 days. Please triage the issue so the fix can be established.