[a11y][Violation][1.4.3 Contrast (Minimum)] Text contrast issues reported on Notebook UI
Opened this issue · 2 comments
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
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:
<span class="ͼ11">
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:
<span class="ͼu">
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
Linking jupyterlab/jupyterlab#16888