jupyter / jupyter/notebook

[a11y][Violation][1.4.3 Contrast (Minimum)] Text contrast issues reported on Notebook UI

Open
#7,490 3 comments 0 reactions 0 assignees View on GitHub
bug tag:Accessibility
Dominant language
Jupyter Notebook
Stars
13.3k
Forks
5.8k
Avg merge
6d 11h
Merged PRs (30d)
7

Description

## Description

I am running an accessibility test suite with Notebook UI using the **IBM Equal Access Accessibility Checker** tool on Chrome browser. The results look good overall, only a few things are missing to reach a first formal level of compliance. So kindly help look into these.

Issues reported were violating **WCAG 2.2** requirements.
Ref: https://www.ibm.com/able/requirements/checker-rule-sets

Full report (includes information on element locations where issue were found):
[Accessibility_Report-7a73e10e-f8a4-4a06-a78d-5174a1309c5b.xlsx](https://github.com/user-attachments/files/17400350/Accessibility_Report-7a73e10e-f8a4-4a06-a78d-5174a1309c5b.xlsx)

# Category: `1.4.3 Contrast (Minimum)`
Ref: https://www.ibm.com/able/requirements/requirements/?version=v7_3#1_4_3)

****Violation of Rule:** `text_contrast_sufficient`**

> List of issues with elements that violate this rule with a screenshots
> > **Issue 1**
> > Text contrast of 4.17 with its background is less than the WCAG AA minimum requirements for text of size 13px and weight of 400
> > **Element location:**
> > ``
> > **Screenshot:**
> > ![Image](https://github.com/user-attachments/assets/a5460e7e-dfc8-4b1a-8d6a-0cb810815949)

> > **Issue 2**
> > Text contrast of 4.26 with its background is less than the WCAG AA minimum requirements for text of size 13px and weight of 400
> > **Element location:**
> > ``
> > **Screenshot:**
> > ![Image](https://github.com/user-attachments/assets/aaaebb87-59b9-4e1b-9888-966a1823269b)

## Reproduce

- Install Chrome extension for IBM accessibility checker tool. Ref: https://www.ibm.com/able/toolkit/verify/automated
- Open Notebook UI on Chrome browser. Add some cells with code.
- Run the tool and we can see the above `Violation`s reported.

Here is the screenshot of the UI scanned for the attached report:
![Image](https://github.com/user-attachments/assets/895eebec-51ad-43cd-93bb-99c4a8193b68)

## Expected behavior
The visual presentation of text and images of text has a contrast ratio of at least 4.5:1, with a 3:1 ratio for large-scale text.
Reference on how to fix this issue can be found in these links:
https://www.ibm.com/able/toolkit/design/visual/#text-color-contrast

Contributor guide

Open the contributing guide

Research direction

Start with the attached Accessibility_Report-7a73e10e-f8a4-4a06-a78d-5174a1309c5b.xlsx and reproduce the IBM Equal Access scan on the Notebook UI in Chrome. Inspect the styles applied to the reported span classes `ͼ11` and `ͼu`; the work is done when both reported text elements meet the WCAG AA contrast ratio of at least 4.5:1.

Written by the indexing model from the issue text.

Assessment

Tech stack
css, jupyter-notebook
Domain
accessibility, frontend
Issue type
Bug
Difficulty
3/5
Estimated time
1-2 days
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
45/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.