[DOCS]: Ensures the contrast between foreground and background colors meets WCAG 2 AA minimum contrast ratio thresholds #4748
Assignees
Labels
A11yAuto
Issues found using Accessibility Insights Tool by E+D Accessibility Team
A11ySev2
Accessibility Team tag - P2 items
A11yWCAG
Accessibility Team tag - Web Content Accessibility Guidelines
bug 🐛
CT-June24
HCL-E+D
needs attention 👋
needs triage 🔍
Product-PWABuilder
For Tracking PWABuilder bugs by Accessibility E+D team
Comments
Suriya617
added
bug 🐛
needs triage 🔍
A11yWCAG
|
This issue has been marked as "needs attention 👋" since it has not been triaged for 7 days. Please triage the issue . |
|
This issue has been marked as "needs attention 👋" since it has not been triaged for 7 days. Please triage the issue . |
2 similar comments
|
This issue has been marked as "needs attention 👋" since it has not been triaged for 7 days. Please triage the issue . |
|
This issue has been marked as "needs attention 👋" since it has not been triaged for 7 days. Please triage the issue . |
|
This issue has been marked as "needs attention 👋" since it has not been triaged for 7 days. Please triage the issue . |
jgw96
added a commit
that referenced
this issue
Aug 22, 2024
fixes - #4763 - #4748 - #4783 - #4747 <!-- Link to relevant issue (for ex: "fixes #1234") which will automatically close the issue once the PR is merged --> ## PR Type <!-- Please uncomment one ore more that apply to this PR --> <!-- - Bugfix --> <!-- - Feature --> <!-- - Code style update (formatting) --> <!-- - Refactoring (no functional changes, no api changes) --> <!-- - Build or CI related changes --> <!-- - Documentation content changes --> <!-- - Sample app changes --> <!-- - Other... Please describe: --> ## Describe the current behavior? <!-- Please describe the current behavior that is being modified or link to a relevant issue. --> ## Describe the new behavior? ## PR Checklist - [ ] Test: run `npm run test` and ensure that all tests pass - [ ] Target main branch (or an appropriate release branch if appropriate for a bug fix) - [ ] Ensure that your contribution follows [standard accessibility guidelines](https://docs.microsoft.com/en-us/microsoft-edge/accessibility/design). Use tools like https://webhint.io/ to validate your changes. ## Additional Information --------- Signed-off-by: dependabot[bot] <[email protected]> Co-authored-by: Beth Pan <[email protected]> Co-authored-by: Gleb Khmyznikov <[email protected]> Co-authored-by: Jaylyn Barbee <[email protected]> Co-authored-by: Jaylyn Barbee <[email protected]> Co-authored-by: Nikola Metulev <[email protected]> Co-authored-by: Mara'ah Lee <[email protected]> Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com> Co-authored-by: Adolf Daniel <[email protected]> Co-authored-by: Justin Willis (HE / HIM) <[email protected]> Co-authored-by: Zach Teutsch <[email protected]> Co-authored-by: vipul-bhojwani <[email protected]> Co-authored-by: Amrutha Srinivasan <[email protected]> Co-authored-by: Federico Navarrete <[email protected]> Co-authored-by: Toby Liu <[email protected]> Co-authored-by: microsoft-github-policy-service[bot] <77245923+microsoft-github-policy-service[bot]@users.noreply.github.com> Co-authored-by: Amrutha Srinivasan <[email protected]> Co-authored-by: Jonas Thelemann <[email protected]> Co-authored-by: Siraj Chokshi <[email protected]> Co-authored-by: Thomas Peißl <[email protected]> Co-authored-by: Migush <[email protected]> Co-authored-by: Abdullhakim Sami Alshanqity <[email protected]> Co-authored-by: mecmep <[email protected]> Co-authored-by: Joel Limberg <[email protected]> Co-authored-by: Pratik-k <[email protected]> Co-authored-by: Maicon Carraro <[email protected]>
|
This issue has been marked as "needs attention 👋" since it has not been triaged for 7 days. Please triage the issue . |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
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:
The text was updated successfully, but these errors were encountered: