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.54k stars 273 forks source link

[DOCS]: Luminosity Contrast Ratio is 2.646.1 for the Placeholder text of the Search edit field. #4750

Open Suriya617 opened 2 weeks ago

Suriya617 commented 2 weeks ago

What happened?

The color contrast ratio is 2.646.1 for the Placeholder text of the Search edit field which is very less than expected ratio.

How do we reproduce the behavior?

Repro Steps:

  1. Open the PWA Builder URL in Anaheim dev browser.
  2. PWA Builder page will appear.
  3. Navigate to the Search edit field present in left pane.
  4. Open Color Contrast analyser tool.
  5. Observe the issue.

What do you expect to happen?

The color contrast ratio for the Placeholder text of the Search edit field should be greater than or equal to 4.5:1.

What environment were you using?

Test Environment: OS Build: Windows 11 Enterprise Insider Preview 24H2 (26120.961) Edge Browser: Version 127.0.2651.2 (Official build) dev (64-bit) User ID: V- Tool: Color Contrast Analyser URL: https://docs.pwabuilder.com/#/home/native-features

Additional context

User Experience: When a minimum contrast ratio is not provided between text and its background, it is difficult for low-vision users as well as anyone in extreme lighting environments to read the content.

WCAG Reference: https://www.w3.org/WAI/WCAG21/Understanding/contrast-minimum.html

Attachment: MAS1 4 3_CCA is fail for placeholder text