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.
The color contrast analyzer indicates that the Close icon button on the Share score dialog has a contrast ratio of 1.7:1, which is below the recommended 3:1 for non-text graphical elements.
How do we reproduce the behavior?
Repro Steps:
Open the above URL.
Navigate to the Share score button and activate it, dialog will open.
Observe the color contrast ratio for the close icon button.
What do you expect to happen?
The Close icon button on the Share score dialog should have a color contrast ratio of at least 3:1 against its background to ensure sufficient visibility and accessibility.
User Impact:
Users with visual impairments, such as low vision or color blindness, may struggle to perceive or locate the Close icon button on the Share score dialog due to inadequate color contrast.
What happened?
The color contrast analyzer indicates that the Close icon button on the Share score dialog has a contrast ratio of 1.7:1, which is below the recommended 3:1 for non-text graphical elements.
How do we reproduce the behavior?
Repro Steps:
What do you expect to happen?
The Close icon button on the Share score dialog should have a color contrast ratio of at least 3:1 against its background to ensure sufficient visibility and accessibility.
What environment were you using?
Test Environment: OS Build: Windows 11 Enterprise Insider Preview 24H2 (26120.461) Edge Browser: Version 123.0.2400.1 (Official build) dev (64-bit) URL: https://www.pwabuilder.com/reportcard?site=https://webboard.app Tool: Color contrast Analyzer
Additional context
Note: Issue is also repro at https://docs.pwabuilder.com/#/home/sw-intro for search clear icon button which appears after typing any text in search edit field.
User Impact: Users with visual impairments, such as low vision or color blindness, may struggle to perceive or locate the Close icon button on the Share score dialog due to inadequate color contrast.
WCAG Reference: https://www.w3.org/WAI/WCAG22/Understanding/non-text-contrast
Attachments:![MAS1 4 11_CCA fails for the close icon button on share dialog](https://github.com/pwa-builder/PWABuilder/assets/117908911/b7b40fbe-6ba7-4d36-b3cb-7d1108c4b3b8)