Add color contrast checks to custom focus and accent color dialogs

Created on 13 February 2025, 2 months ago

Problem/Motivation

At the moment the user is able to define custom focus and accent colors on admin/appearance/settings/gin. That way it is in no way ensured that the color that is picked here is in any way meeting the minimum color contrast requirements to be compliant with SC1.4.3, SC1.4.11, and/or SC2.4.13.

Discussed and iterated on the issue with @mgifford, @the_g_bomb, @katannshaw, and @drupa11y

Steps to reproduce

Try changing the accent color to custom on admin/appearance/settings/gin.

Proposed resolution

Add a feedback to the color selection dialog that validates the picked color against the three or six background colors in the current mode (light/dark) the focus or accent color is displayed against.
The selected focus color has to have a color contrast of at least 3:1, accent colors have to have a color contrast of at least 4.5:1 against the set of available background colors for the chosen color mode.
Provide an immediate feedback if the required color contrast is not met or met

In case a user tries to save the form with the chosen color anyway, provide a confirmation step informing the user again that the color is not meeting the requirements and is not compliant with WCAG2.2 - to make sure the person is really sure about the implications of that step and that this is not a recommended nor advisable step.
In case a user is using a compliant custom focus and or custom accent color and is now changing from light to dark mode or the other way around, bring up the custom color dialog and run the compliance check - cuz the odds are high that the chosen color wont meet the requirement for the complementary color mode.