Problem/Motivation

I had opened that issue already over in the Gin queue https://git.drupalcode.org/project/gin/-/work_items/3506323

At the moment the user is able to enter anything into the custom accent color field breaking the visual display in the default admin theme: #3637163: The custom accent color field is in lack of a form validation check. The description for the custom accent color field is only stating: Use with caution, values should meet a11y criteria. The linked issue is fixing the problem that the user is able to enter anything and they are prone to typos breaking the entire experience. But still, the actual implications of "should meet a11y criteria" are not communicated clearly to the user. Due to the design of regular buttons in default admin with no background color and button labels in the custom accent color it requires that the picked custom accent color has a color contrast of at least 4.5:1 against every possible background color in the current mode which is either light or dark. Those implications are not apparent to the user at all.

Steps to reproduce

Create custom accent color on /admin/appearance/settings/default_admin and go to admin/content, one of the examples where the drop button border and label are using the (custom) accent color.

Proposed resolution

Extend the form validation added in #3637163: The custom accent color field is in lack of a form validation check with color contrast checks. so the chosen custom accent color for example in light mode is tested against all the possible background colors a regular button can be placed on - same in the case of the dark mode. in case the picked custom accent color is meeting the required syntax fixed in #3637163: The custom accent color field is in lack of a form validation check but not the requirement for SC1.4.3 then either make the form validation fail or show a confirmation dialog and let the user confirm that they are fully aware that their choice only has a color contrast of eg 3.4:1 but the required minimum is 4.5:1.maybe even add an example regular button styled in that chosen custom accent color illustrating the implications of their choice in that confirmation dialog even.

Remaining tasks

User interface changes

Introduced terminology

API changes

Data model changes

Release notes snippet

Comments

rkoller created an issue.