A11y fix sufficient contrast

[stevefrenzel]

Description

Changed the border color for inputs and checkboxes so it has a contrast ratio of at least 3:1. New contrast ratio is now 7.01:1.

Related Issue

• Works towards [a11y] 9.1.4.11 - Sufficient contrast of graphics and graphical picture elements web#5386

How Has This Been Tested?

• Used this contrast checker to determine the right color: https://webaim.org/resources/contrastchecker/

Types of changes

• Bug fix (non-breaking change which fixes an issue)
• New feature (non-breaking change which adds functionality)
• Breaking change (fix or feature that would cause existing functionality to change)
• Technical debt
• Tests

Checklist:

• Code changes
• Unit tests added
• Acceptance tests added
• Documentation added/updated

Open tasks:

Page 1 (Alle Dateien)
When creating a public link in the case the user doesn’t fill the fields a error message appears above the form. This error message has a „X“ button on the right (to remove the message). Here the contrast ration to the background color is lower than 3:1.

Not able to reproduce this scenario, as there is no error message being displayed. Instead the submit button is just disabled as long the required input field is empty.

[kulmann]

I changed the target branch for this PR to a11y-updates - you don't want to merge to master, but to that branch.

[kulmann]

I changed the description so that it doesn't say fixes anymore, but Works towards, because the linked issue is not entirely fixed.

[kulmann]

This creates followup-issues (which is ok). First one I see (and didn't dig deeper) is that the upload progress component in web uses the oc-color-input-border variable as a background. Which sounds slightly wrong, so it probably makes sense to exchange that color in web.

[kulmann]

Comparing old vs new, I think that the checkboxes now look too heavy / prominent in the web ui. They are not the primary element in the files list, so it doesn't feel right, UX wise, to give them this much attention. Please see screenshots below. Can you please try a compromise? Like contrast ratio 4:1 or 5:1?

[stevefrenzel]

Comparing old vs new, I think that the checkboxes now look too heavy / prominent in the web ui. They are not the primary element in the files list, so it doesn't feel right, UX wise, to give them this much attention. Please see screenshots below. Can you please try a compromise? Like contrast ratio 4:1 or 5:1?

Input border color now has a ratio of 4.5:1, hope that works for you?

[stevefrenzel]

This creates followup-issues (which is ok). First one I see (and didn't dig deeper) is that the upload progress component in web uses the oc-color-input-border variable as a background. Which sounds slightly wrong, so it probably makes sense to exchange that color in web.

If I'm not mistaken this component uses --oc-color-border but not --oc-color-input-border, which sound dangerously similar but has a completely different color.

[pascalwengerter]

This creates followup-issues (which is ok). First one I see (and didn't dig deeper) is that the upload progress component in web uses the oc-color-input-border variable as a background. Which sounds slightly wrong, so it probably makes sense to exchange that color in web.

If I'm not mistaken this component uses --oc-color-border but not --oc-color-input-border, which sound dangerously similar but has a completely different color.

This seems to be the case, so technically resolved

[pascalwengerter]

Comparing old vs new, I think that the checkboxes now look too heavy / prominent in the web ui. They are not the primary element in the files list, so it doesn't feel right, UX wise, to give them this much attention. Please see screenshots below. Can you please try a compromise? Like contrast ratio 4:1 or 5:1?

Input border color now has a ratio of 4.5:1, hope that works for you?

I'll merge "as is" and we can discuss how much contrast we want when we do the backporting, quite a lot has changed since the audit in terms of UI design