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

{Freeway-Bug}[PWA Builder]: Color contrast ratio is less than 3:1 for the close icon present on the discord popup. #4744

Closed
Anshi0420 opened this issue Jun 20, 2024 · 1 comment
Closed

{Freeway-Bug}[PWA Builder]: Color contrast ratio is less than 3:1 for the close icon present on the discord popup. #4744

Anshi0420 opened this issue Jun 20, 2024 · 1 comment
Assignees
@Jaylyn-Barbee
Labels
A11ySev2 Accessibility Team tag - P2 items A11yWCAG Accessibility Team tag - Web Content Accessibility Guidelines Accessibility [E+D] Issues found by the accessibility E+D Team at Microsoft bug 🐛 CT-June24 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 close icon on the Discord popup does not meet the minimum color contrast ratio of 3:1 against its background, it is 2.7:1.

How do we reproduce the behavior?

Repro Steps:

  1. Open the above URL.
  2. Now check the color contrast ratio for the close button present on the discord pop up.
  3. Observe the issue.

What do you expect to happen?

The close icon should have a color contrast ratio of at least 3:1 with its background to ensure readability 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/
Tool: Color contrast Analyzer

Additional context

User Impact:
Users with visual impairments, particularly those with low vision or color blindness, may struggle to perceive or locate the close icon on the Discord popup. This can lead to difficulty in dismissing the popup or navigating the interface effectively, impacting the overall usability and accessibility of the application for these users.

WCAG Reference:
https://www.w3.org/WAI/WCAG22/Understanding/non-text-contrast

Attachments:
WCAG1 4 11_Color contrast ratio is less than for the close icon present on the discord popup
@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 HCL-E+D Product-PWABuilder For Tracking PWABuilder bugs by Accessibility E+D team labels Jun 20, 2024
@Jaylyn-Barbee Jaylyn-Barbee changed the title [PWA Builder-Blog]: Color contrast ratio is less than 3:1 for the close icon present on the discord popup. [PWA Builder]: Color contrast ratio is less than 3:1 for the close icon present on the discord popup. Jun 20, 2024
@Suriya617 Suriya617 mentioned this issue Jun 27, 2024
Closed
@Anshi0420 Anshi0420 changed the title [PWA Builder]: Color contrast ratio is less than 3:1 for the close icon present on the discord popup. {Freeway-Bug}[PWA Builder]: Color contrast ratio is less than 3:1 for the close icon present on the discord popup. Jun 27, 2024
@microsoft-github-policy-service 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 mentioned this issue Jul 8, 2024
Merged
@Jaylyn-Barbee Jaylyn-Barbee self-assigned this Jul 8, 2024
@Jaylyn-Barbee Jaylyn-Barbee moved this to In Review 🤔 in PWABuilder Jul 8, 2024
jgw96 pushed a commit that referenced this issue Jul 8, 2024
@Jaylyn-Barbee
Fixing various accessbility bugs (#4770)
d3245b9 
Fixed:
#4259 
#4744
Half of #4749: For the search bar clear button, that comes from an
external component we have no control over.
@github-project-automation github-project-automation bot moved this from In Review 🤔 to Done ✔️ in PWABuilder Jul 8, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees

@Jaylyn-Barbee Jaylyn-Barbee

Labels
A11ySev2 Accessibility Team tag - P2 items A11yWCAG Accessibility Team tag - Web Content Accessibility Guidelines Accessibility [E+D] Issues found by the accessibility E+D Team at Microsoft bug 🐛 CT-June24 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
3 participants
@Jaylyn-Barbee @Suriya617 @Anshi0420