>>> [!note] Migrated issue <!-- Drupal.org comment --> <!-- Migrated from issue #3506307. --> Reported by: [rkoller](https://www.drupal.org/user/3217695) >>> <h3 id="summary-problem-motivation">Problem/Motivation</h3> <p>There are several problems in the context of focus outlines in Gin: </p> <ul> <li>Many visible focus colors don&rsquo;t meet the minimum color contrast of 3:1 in light and dark mode. See the following Google sheet <a href="https://docs.google.com/spreadsheets/d/1won35PxhRFexJYE8FmZ4DCNTo7xEAxC85kpmqc0iqZg/edit?gid=657743239#gid=657743239&amp;range=2:2">https://docs.google.com/spreadsheets/d/1won35PxhRFexJYE8FmZ4DCNTo7xEAxC85kpmqc0iqZg/edit?gid=657743239#gid=657743239&amp;range=2:2</a> or <a href="https://www.drupal.org/files/issues/2025-02-13/focus_outlines.xlsx_.zip">focus_outlines.xlsx.zip</a> for a table.</li> <p><img src="https://www.drupal.org/files/issues/2025-02-13/focus_outline_light_mode.jpg" alt="the gin settings page with the light mode being active and in focus in the appearance switch component. and the colour contrast analyser floating on top on the right side of the image illustrating that the orange focus color has a color contrast of 1.8:1"></p> <li>The focus outline is defined by <code>box-shadow: 0 0 0 1px var(--gin-color-focus-border),0 0 0 4px var(--gin-color-focus)</code> - in addition to that for some selectors the outline property is set to <code>none</code> (gin.css in line 994 and 3466). Problem is, focus outlines defined by the <code>box-shadow</code> property are not visible in Forced Colors mode (see <a href="https://stackoverflow.com/a/52616313">https://stackoverflow.com/a/52616313</a> - looks like Claro uses the same approach @andrewmacpherson proposed in the linked post)</li> <p><img src="https://www.drupal.org/files/issues/2025-02-13/focus_outline_zoom_view.jpg" alt="the colour contrast analyzer color picked zoomed in the focus outline consisting of one pixel dark border and four pixel orange focus outline for the appearance switcher component in light mode"></p> <li>The one pixel wide focus border is barely visible and it looks more like a visual glitch than a stylistic device helping to visually separate the focus outline from the element it highlights. At the moment that focus border only helps to make the focus outline pass formally SC1.4.11 for most of the focus and accent colors in light mode, even though it is barely visible and not the selected focus or accent color but just semi-transparent black in light and dark mode instead.</li> <p><img src="https://www.drupal.org/files/issues/2025-02-13/focus_outline_border.jpg" alt="the primary tabs on the extend page with the list tab active and in focus, the orange focus has a thin dark border"></p> <li>There is the problem of simultaneous contrast, at the moment the focus outline is directly "touching" the elements it highlights, while Claro is employing an outline offset. An offset isn&rsquo;t solving the problem of the simultaneous contrast, but it is at least easing it. To illustrate the problem, if you set for example the focus color to "gin focus color (Default)" and the accent color to &ldquo;Gin blue&rdquo; in light mode and you focus the blue Drupal logo in the navigation sidebar or the primary button you have a hard time recognizing that the elements are in focus, since the color of the focus outline and the element in focus are close.</li> <p><img src="https://www.drupal.org/files/issues/2025-02-13/simultaneous_contrast_logo.jpg" alt="the blue drupal logo with the light blue gin focus color outline"><br> <img src="https://www.drupal.org/files/issues/2025-02-13/simultaneous_contrast_button.jpg" alt="the dark blue primary button with a the light blue gin focus outline"> </p></ul> <p>Discussed and iterated on the issue with @mgifford, @the_g_bomb, @katannshaw, and @drupa11y</p> <h4 id="summary-steps-reproduce">Steps to reproduce</h4> <ul> <li>Go to <code>admin/appearance/settings/gin</code> and test the different focus and accent color settings directly on the page. For testing the issue in Forced Colors mode make sure that before activating you&rsquo;ve switched to dark mode.</li> </ul> <h3 id="summary-proposed-resolution">Proposed resolution</h3> <p>The group had a consensus about the following steps to improve the current state:</p> <ul> <li>All focus colors need to have a color contrast of at least 3:1, accent colors have to have to have a color contrast of at least 4.5:1 (see <span class="drupalorg-gitlab-issue-link project-issue-status-info project-issue-status-4"><a href="https://www.drupal.org/project/gin/issues/3506316" title="Status: Postponed">#3506316: [PP-1] Ensure that primary and secondary buttons have a high enough color contrast</a></span>)</li> <li>Add test coverage to Drupal CI for every color combination of every available focus color against the available background color in light and dark mode to avoid regressions on future changes.</li> <li>Drop the focus border and just use a single colored focus outline like Claro, that way the focus outline would even be compliant with SC2.4.13 as well.</li> <li>Use the pattern with the transparent outline that is used in Claro to fix the invisible focus outlines in Forced Colors mode (see <a href="https://stackoverflow.com/a/52616313">https://stackoverflow.com/a/52616313</a>)</li> <li>Add an offset to the focus outline, to ease the problem with simultaneous contrast.</li> </ul> <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>