>>> [!note] Migrated issue <!-- Drupal.org comment --> <!-- Migrated from issue #3484996. --> Reported by: [rkoller](https://www.drupal.org/user/3217695) Related to !31 >>> <h3 id="summary-problem-motivation">Problem/Motivation</h3> <p>The current styling used in Klaro has two problems: </p> <ol> <li>First it has a several accessibility related issues: <ul> <li>In the <code>consent box</code> the color contrast of the green <code>customize</code> link text isn't meeting the minimum color contrast requirement of <code>4.5:1</code> against the dark background (ref SC 1.4.3). When the modal is expanded by clicking the <code>customize</code> link, the greyish description, the green <code>privacy policy</code> link, the greyish <code>Powered by Klaro</code> sub line, as well as the <code>Always required</code> label are also not meeting the minimum color contrast requirement of 4.5:1.</li> <li>In regards of non-text contrast the grey of the <code>decline</code> button isn't meeting the necessary 3:1 against the darker background, that way the interface component, the button, is not clearly distinguishable (ref SC1.4.11). On the expanded modal it applies to the <code>decline</code> button there as well. In addition to that the knobs for the app toggles are not recognizable at all for the disabled state and are also far from good with 1.6:1 for the enabled state. The intermediate state for the "enable or disable all services" toggle is also visually unclear. In addition to that there is a visual inconsistency, if all services are enabled, required services are using a different green for the background and the knob, than the non-required services. And it has to be noted that the background of the consent box is not necessarily distinguishable and meeting the color contrast of 3:1 if the background is the dark footer in olivero for example. and strictly speaking the light grey outline and drop shadow of the toggle button has also a too low color contrast against light or white backgrounds. (but that i don't consider that pressing since the lock inside is still visible that way)</li> <li>The visibility of the focus outline is also not meeting SC2.4.13 which is a AAA criterion but which should be an at least AA criterion since based on SC2.4.7 a color contrast for a focus outline of 1.1:1 is meeting the requirement of focus "visible". ;) The rule of thumb is that focus outlines should have at least a width of 2px and a color contrast of at least 3:1. In the context of Klaro the focus outline for the toggle button has a thick focus outline but for the focus color browser default styles are being used, that means in safari on macos the 3:1 are not met with safaris light blue focus colors. in contrast edge is meeting the success criterion with its dark/black default focus style. In the consent box the <code>customize link</code> has a green outline that meets the contrast with 3.3:1 while the now blue focus outline fails for the <code>decline</code> and <code>accept</code> button with a color contrast of 1.5:1. The focus outline color should be consistent ideally (it would be confusing and distracting if the color of a mouse cursor would be changing in different contexts). On the expanded modal the blue outlines for the close button, the services, the decline and accept selected buttons have a too low color contrast, same for the greyish focus outline for the powered by klaro sub line.</li> <li>Some of the elements on the expanded modal are not meeting SC2.5.8 for the minimum target size of 24x24px (testable with for example <a href="https://github.com/stevefaulkner/targetsize/blob/main/bookmarklet.md">https://github.com/stevefaulkner/targetsize/blob/main/bookmarklet.md</a>). The close button, the link for the privacy policy, the toggle button labels (there only relevant for the ones that are not required), and the powered by Klaro link are not meeting the minimum target size of 24x24px </li> </ul> </li> <li>The default design Klaro is shipping with is not in line with the designs used in Oliver, Claro, and/or Gin. And from my perspective it would make sense to have one design that is working consistently across Olivero, Claro, and Gin, which is adding another level of complexity unfortunately probably.</li> </ol> <h4 id="summary-steps-reproduce">Steps to reproduce</h4> <h3 id="summary-proposed-resolution">Proposed resolution</h3> <p>Since the entire appearance of Klaro is themeable by CSS it would be a good thing to adjust the visual appearance to Olivero, Claro and Gin (and make it visually in line with Drupal CMS in consequence). As a positive side effect those visual changes would also fix most or all of the accessibility related issues listed above. I've added the <code>Needs design</code> tag and @jurgenhaas already contacted @ckrina in that regard (but she is out of office for the next three weeks) </p> <h3 id="summary-remaining-tasks">Remaining tasks</h3> <h3 id="summary-ui-changes">User interface changes</h3> <h3 id="summary-api-changes">API changes</h3> <h3 id="summary-data-model-changes">Data model changes</h3>