[a11y][Violation][1.4.3 Contrast (Minimum)] Text contrast issues reported on Notebook UI
- 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:**
> > 
> > **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:**
> > 
## 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:

## 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
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