Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

[DOCS]: Ensures the contrast between foreground and background colors meets WCAG 2 AA contrast ratio. thresholds #4276

Closed
Anshi0420 opened this issue Aug 11, 2023 · 12 comments
Closed

[DOCS]: Ensures the contrast between foreground and background colors meets WCAG 2 AA contrast ratio. thresholds #4276

Anshi0420 opened this issue Aug 11, 2023 · 12 comments
Assignees
@zateutsch
Labels
A11yAuto Issues found using Accessibility Insights Tool by E+D Accessibility Team A11ySev2 Accessibility Team tag - P2 items A11yTTValidated Accessibility team tag for closed bugs A11yWCAG Accessibility Team tag - Web Content Accessibility Guidelines Accessibility [E+D] Issues found by the accessibility E+D Team at Microsoft bug 🐛 CT-July23 external-dependency HCL-E+D needs attention 👋 needs triage 🔍 Product-PWABuilder For Tracking PWABuilder bugs by Accessibility E+D team PWABuilder_Web

Comments

@Anshi0420
Copy link
Collaborator

What happened?

The color contrast ratio for the code text present on the page is 3.2 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. Now Run the Fast Pass from AI4W.
  4. 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 22H2 (23493.1000)
Edge Browser: Version 115.0.1880.3 (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.

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

Attachments:

image

image

image
@Anshi0420 Anshi0420 added bug 🐛 needs triage 🔍 A11yWCAG Accessibility Team tag - Web Content Accessibility Guidelines Accessibility [E+D] Issues found by the accessibility E+D Team at Microsoft A11ySev2 Accessibility Team tag - P2 items Product-PWABuilder For Tracking PWABuilder bugs by Accessibility E+D team A11yAuto Issues found using Accessibility Insights Tool by E+D Accessibility Team HCL-E+D CT-July23 labels Aug 11, 2023
@Suriya617 Suriya617 mentioned this issue Aug 17, 2023
Closed
@microsoft-github-policy-service
Copy link
Contributor

This issue has been marked as "needs attention 👋" since it has not been triaged for 7 days. Please triage the issue .

@microsoft-github-policy-service
Copy link
Contributor

This issue has been marked as "needs attention 👋" since it has not been triaged for 7 days. Please triage the issue .

1 similar comment
@microsoft-github-policy-service
Copy link
Contributor

This issue has been marked as "needs attention 👋" since it has not been triaged for 7 days. Please triage the issue .

@Jaylyn-Barbee Jaylyn-Barbee changed the title [PWA Builder-Blog]: Ensures the contrast between foreground and background colors meets WCAG 2 AA contrast ratio. thresholds [DOCS]: Ensures the contrast between foreground and background colors meets WCAG 2 AA contrast ratio. thresholds Aug 28, 2023
@maraah1 maraah1 self-assigned this Aug 30, 2023
@maraah1
Copy link
Collaborator

maraah1 commented Aug 30, 2023

@sanadeee

@maraah1 maraah1 moved this to In Progress 🚧 in PWABuilder Sep 5, 2023
@microsoft-github-policy-service
Copy link
Contributor

This issue has been marked as "needs attention 👋" since it has not been triaged for 7 days. Please triage the issue .

2 similar comments
@microsoft-github-policy-service
Copy link
Contributor

This issue has been marked as "needs attention 👋" since it has not been triaged for 7 days. Please triage the issue .

@microsoft-github-policy-service
Copy link
Contributor

This issue has been marked as "needs attention 👋" since it has not been triaged for 7 days. Please triage the issue .

@Jaylyn-Barbee Jaylyn-Barbee removed the status in PWABuilder Oct 2, 2023
@Jaylyn-Barbee
Copy link
Contributor

need to do something with Prism potentially

@zateutsch zateutsch mentioned this issue Oct 2, 2023
Merged
@Jaylyn-Barbee Jaylyn-Barbee moved this to In Review 🤔 in PWABuilder Oct 2, 2023
github-merge-queue bot pushed a commit that referenced this issue Oct 2, 2023
@zateutsch
[DOCS][ACCESIBILITY] 4276: Code Snippet contrast (#4402)
6b7ef7a 
fixes #4276 

Added VS code-based theme w better contrast for code snippets.
@microsoft-github-policy-service
Copy link
Contributor

This issue has been marked as "needs attention 👋" since it has not been triaged for 7 days. Please triage the issue .

1 similar comment
@microsoft-github-policy-service
Copy link
Contributor

This issue has been marked as "needs attention 👋" since it has not been triaged for 7 days. Please triage the issue .

@zateutsch
Copy link
Contributor

Fixed by #4402

@github-project-automation github-project-automation bot moved this from In Review 🤔 to Done ✔️ in PWABuilder Oct 11, 2023
@Anshi0420
Copy link
Collaborator Author

Anshi0420 commented Jun 25, 2024 •
edited
Loading

Closing this and tracking this bug as #4748.

@Anshi0420 Anshi0420 reopened this Jun 25, 2024
@github-project-automation github-project-automation bot moved this from Done ✔️ to Todo 📃 in PWABuilder Jun 25, 2024
@Anshi0420 Anshi0420 added CT-June24 A11yTTValidated Accessibility team tag for closed bugs and removed CT-June24 labels Jun 25, 2024
@github-project-automation github-project-automation bot moved this from Todo 📃 to Done ✔️ in PWABuilder Jun 26, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees

@zateutsch zateutsch

Labels
A11yAuto Issues found using Accessibility Insights Tool by E+D Accessibility Team A11ySev2 Accessibility Team tag - P2 items A11yTTValidated Accessibility team tag for closed bugs A11yWCAG Accessibility Team tag - Web Content Accessibility Guidelines Accessibility [E+D] Issues found by the accessibility E+D Team at Microsoft bug 🐛 CT-July23 external-dependency HCL-E+D needs attention 👋 needs triage 🔍 Product-PWABuilder For Tracking PWABuilder bugs by Accessibility E+D team PWABuilder_Web
Projects
PWABuilder
Status: Done ✔️
Milestone
No milestone
Development

No branches or pull requests
5 participants
@maraah1 @Jaylyn-Barbee @Suriya617 @zateutsch @Anshi0420