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.