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.

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

Improved accessibility color contrast on Slides page #829

Open
YukaUU opened this issue Mar 20, 2024 · 1 comment
Open

Improved accessibility color contrast on Slides page #829

YukaUU opened this issue Mar 20, 2024 · 1 comment

Comments

@YukaUU
Copy link
Contributor

YukaUU commented Mar 20, 2024

Summary:
Improve color contrast in two functions of the slides page.
1:Text in header
2: DICOM Button
Improve accessibility by ensuring proper color contrast, Low Vision, and Colorblindness support

Background:
To improve accessibility, the issue was verified with LightHouse and axe DevTools v4.77.1. The above two functions do not satisfy either of the color contrast criteria in WCAG 1.4.3, which is 4.5:1 for level AA and level AAA.
Low Vision and Colorblindness have difficulty recognizing text in the header and do not quickly understand its role on the page. Additionally, it improves the situation where it is difficult to recognize that the button is a DICOM button.
To resolve them, the color contrast needs to be changed.
Use Cases:
It is assumed that this is the slides page that is viewed immediately after a page transition.
Improved color contrast allows everyone to read the overview in the header in a short time.
Eliminate the time everyone spends looking for DICOM buttons, and support correct operation.

Implementation:
Improves visibility by adjusting the color contrast ratio without significantly changing color, without causing discomfort to the user.
1 : Text in header
Current header image
background-color: #17a2b8
color: #fff
The color contrast ratio is 3.04:1 and does not meet level AA and level AAA for normal text as shown in the image.

Current header image
before_カラー

Results of color contrast check
カラーチェック

Text in header image with improvements
background-color: 1A607A
color: #fff
Results of color contrast check
Color contrast ratio is 7:1 and meets level AA, level AAA as shown in the image
after_カラーチェック

カラーチェック改善

2: DICOM Button
The DICOM button can also be seen in the current header image.
background color: #5f9ea0
color:#fff
The color contrast ratio is 3.05:1 and does not meet the normal text level AA and level AAA as shown in the image.
Color contrast check result
DICOMのカラーチェック

Improved contrast ratio for buttons
DICOM_カラーアフター
background-color: #5f9ea0
color: #fff
The color contrast ratio is 7.04:1, meeting Level AA and Level AAA.
Color contrast check results
DICOM_カラーチェック

Expected Impact:
Improved visibility for people with low vision and color blindness.
Additional Notes:
Accessibility analysis tools used:
LightHouse: https://chromewebstore.google.com/detail/lighthouse/blipmdconlkpinefehnmjammfjpmpbjk?hl=ja
axe DevTool : https://www.deque.com/axe/devtools/
And both found color contrast issues.
A tool to check color contrast ratio::
https://webaim.org/resources/contrastchecker/
Explanation of the relevant parts of the accessibility from WCAG2.1
[WCAG2.1]1.4.3 Contrast (Minimum) Level AA
https://www.w3.org/WAI/WCAG22/quickref/#contrast-minimum
[WCAG2.1] 1.4.6 Contrast (Enhanced) Level AAA
https://www.w3.org/WAI/WCAG22/quickref/#contrast-enhanced
Dear que University Elements must meet minimum color contrast ratio thresholds https://dequeuniversity.com/rules/axe/4.8/color-contrast?application=AxeChrome

@nwanduka
Copy link
Contributor

Dropping this here for more context. Thanks for raising this issue @YukaUU.

low color contrast

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

No branches or pull requests

2 participants