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 ratio for the code text present on the page is 3.63 which is very less than expected ratio.
How do we reproduce the behavior?
Repro Steps:
Open the PWA Builder URL in Anaheim dev browser.
PWA Builder page will appear.
Now Run the Fast Pass from AI4W.
Observe the issue.
What do you expect to happen?
The color contrast ratio for the code text present on the page 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: AI4W
URL: https://docs.pwabuilder.com/#/home/native-features
Additional context
Note:
Issue is repro at every URLs where code is present.
Element path:
.language-json[data-lang="json"]:nth-child(12) > .language-json > .string.token:nth-child(15)
Snippet:
"Noteworthy news from today."
How to fix:
Fix any of the following:
Element has insufficient color contrast of 3.2 (foreground color: #669900, background color: #f7f7f7, font size: 11.4pt (15.2px), font weight: normal). Expected contrast ratio of 4.5:1.
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.
What happened?
The color contrast ratio for the code text present on the page is 3.63 which is very less than expected ratio.
How do we reproduce the behavior?
Repro Steps:
What do you expect to happen?
The color contrast ratio for the code text present on the page 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: AI4W URL: https://docs.pwabuilder.com/#/home/native-features
Additional context
Note: Issue is repro at every URLs where code is present.
Element path: .language-json[data-lang="json"]:nth-child(12) > .language-json > .string.token:nth-child(15)
Snippet: "Noteworthy news from today."
How to fix: Fix any of the following:
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
Attachments: