[BITV] 9.1.4.11/4.3 - Media files marked as selected - The checkboxes do not meet the contrast requirements for graphical informative elements depending on the background (1)

[JuliaKirschenheuter]

Blocked by

• [BITV]: adapt checkboxes colors in normal state on dark theme server#42121

as the contrast ratio with the background is below 3:1. It is recommended to place these elements outside of images. The issue also affects unselected checkboxes (see screenshot)

https://report.bitvtest.de/default-en/cbedb5ef-4815-4cba-a83d-995599c178c3.html#checkpoint-3dbfb7615a-v4-n3

[susnux]

Idea: add some blur background to ensure contrast, similar to the dashboard widgets

[JuliaKirschenheuter]

@artonge could you please help us with this ticket?

[artonge]

This was the original design. It got broken due to some change in @nc/vue internal. I should have set up visual tests 🙈.

Shall we go with that?

Before	After
Unchecked & Picture hovered
Unchecked & Checkbox hovered
Checked & Checkbox hovered
Checked

[artonge]

PR: #2182

[JuliaKirschenheuter]

Thank you @artonge!

"Unchecked & Picture hovered" and "Checked" still remaining not accessible ;(

I would suggest not to have special hover styles, because they are not relevant for a11y and leave everything only on checked and unchecked state, like:

Before	After
Unchecked and Checkbox unhovered and hovered
Checked and Checkbox unhovered and hovered

Focus state have to have a double outline (black and white) like on most buttons:

In light theme background have to be not dark but light like:

@nimishavijay would you approve such solution?

[artonge]

I would suggest not to have special hover styles, because they are not relevant for a11y and leave everything only on checked and unchecked state, like:

That's what I ended up doing :), but I thought I updated the description 🤔

[nimishavijay]

Sounds good to me as well. So when you hover over the picture, the checkbox with the background appears, and when you hover over the checkbox, it shows the normal hover feedback for a checkbox component. Would that work? :)