Improved accessibility color contrast on Slides page

[YukaUU]

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

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

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

Improved contrast ratio for buttons

background-color: #5f9ea0
color: #fff
The color contrast ratio is 7.04:1, meeting Level AA and Level AAA.
Color contrast check results

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]

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

[github-actions]

This issue is stale because it has been open 30 days with no activity. Remove stale label or comment or this will be closed in 5 days.

[github-actions]

This issue was closed because it has been stalled for 5 days with no activity.