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

Link styling in JupyterLab light theme doesn't have enough contrast to pass WCAG AAA for Normal Text #14166

Open
andrii-i opened this issue Mar 11, 2023 · 1 comment
Open

Link styling in JupyterLab light theme doesn't have enough contrast to pass WCAG AAA for Normal Text #14166

andrii-i opened this issue Mar 11, 2023 · 1 comment
Labels
bug Design System CSS tag:Accessibility tag:Design and UX tag:Design System CSS If a PR is editing any CSS files please add this tag for design team to review.

Comments

@andrii-i
Copy link
Contributor

Description

Link styling in JupyterLab light theme doesn't have enough contrast to pass WCAG AAA for Normal Text

Reproduce

  1. Open command palette in a notebook
  2. Enter "Trust Notebook"
  3. Note contrast level of link vs background color in the popup window

WebAim test can also be found here
image

Expected behavior

Link styling in JupyterLab light theme does have enough contrast to pass WCAG AAA for Normal Text

Context

Operating System and version: MacOS 12.6.3
Browser and version: Chrome version 109.0.5414.87 (Official Build) (arm64)
JupyterLab version: head-of-master (WIP 4.0.0)
@andrii-i andrii-i added bug tag:Design and UX tag:Accessibility tag:Design System CSS If a PR is editing any CSS files please add this tag for design team to review. Design System CSS status:Needs Triage Applied to new issues that need triage labels Mar 11, 2023
@andrii-i andrii-i mentioned this issue Mar 11, 2023
Merged
@andrii-i andrii-i removed the status:Needs Triage Applied to new issues that need triage label Mar 21, 2023
@andrii-i andrii-i mentioned this issue Mar 21, 2023
Closed
@krassowski
Copy link
Member

Currently --jp-content-link-color is mapped to --md-blue-700 in light mode.

Based on WCAG 3.0 draft guidelines using APCA to the current link colour in light theme we get Lc 71.4 which is below recommended minimum of Lc 75. Bumping it to --md-blue-800 (#1565C0) gives 5.75 contrast against white/Lc 78.2. Although not meeting WCAG 2.0 AAA, it would be rather uncontroversial, incremental change,

@jahir-raihan jahir-raihan mentioned this issue Aug 20, 2023
Closed
1 task
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
bug Design System CSS tag:Accessibility tag:Design and UX tag:Design System CSS If a PR is editing any CSS files please add this tag for design team to review.
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
2 participants
@krassowski @andrii-i