>>> [!note] Migrated issue <!-- Drupal.org comment --> <!-- Migrated from issue #3506316. --> Reported by: [rkoller](https://www.drupal.org/user/3217695) >>> <h3 id="summary-problem-motivation">Problem/Motivation</h3> <p>For a few accent colors the button labels have a too low color contrast against the background of primary buttons to meet SC1.4.3.</p> <p><img src="https://www.drupal.org/files/issues/2025-02-13/primary_secondary_buttons.jpg" alt="a yellow primary save and secondary preview button as well as a yellow toggle button in light mode"></p> <p>Secondary buttons instead consist of just a button border and a button label, they don&rsquo;t have any background color. In consequence, the border color has to meet SC1.4.11 while the button label has to meet SC1.4.3 instead. In addition to accent colors the secondary buttons also use <em>--gin-color-danger</em> in a few contexts. </p> <p><img src="https://www.drupal.org/files/issues/2025-02-13/secondary_danger_dark_mode.jpg" alt="a yellow primary save and a red secondary delete button in dark mode"></p> <p>There are several occasions in light and dark mode where the accent and or the danger color don&rsquo;t meet SC1.4.3 for secondary buttons (See the table in <a href="https://docs.google.com/spreadsheets/d/1won35PxhRFexJYE8FmZ4DCNTo7xEAxC85kpmqc0iqZg/edit?gid=1743902595#gid=1743902595&amp;range=75:75">https://docs.google.com/spreadsheets/d/1won35PxhRFexJYE8FmZ4DCNTo7xEAxC85kpmqc0iqZg/edit?gid=1743902595#gid=1743902595&amp;range=75:75</a> or <a href="https://www.drupal.orgprimary_secondary_button.xlsx.zip">primary_secondary_button.xlsx.zip</a> for more details). In Forced Colors mode there is also no way to distinguish between a primary and a secondary button, the two look identical - both are input elements.</p> <p><img src="https://www.drupal.org/files/issues/2025-02-13/primary_secondary_button_fcm_views_dialog.jpg" alt="an apply, cancle and remove secondary button, white border on black forced color mode background"></p> <p>In some contexts secondary buttons are link elements, in this case they have a higher visual affordance than the primary save button.</p> <p><img src="https://www.drupal.org/files/issues/2025-02-13/primary_secondary_button_fcm_content_type_edit.jpg" alt="a white save, and yellow delete secondary button, on black forced color mode background"></p> <p>That illustrates the point that ideally buttons should be buttons, which would simplify things for Force Colors mode - probably worth a follow up issue for Core in general. </p> <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>Check the buttons on for example <code>admin/structure/views/view/content</code>. For testing the issue in Forced Colors mode make sure that you&rsquo;ve switched to dark mode before.</li> </ul> <h3 id="summary-proposed-resolution">Proposed resolution</h3> <li>Make sure that each accent color and danger color has a color contrast of at least 4.5:1 against each of the three background colors in light and dark mode. Restyling secondary buttons to work around the requirement of 4.5:1 would not help due to the fact that accent colors are used on for example <code>admin/content</code> for micro copy like <code>author names</code> and <code>node titles</code>.</li> <p><img src="https://www.drupal.org/files/issues/2025-02-13/secondary_light_mode.jpg" alt="a table with entities on the content page illustrating that the secondary edit button and the title and author labels of the entities are using the yellow accent color"></p> <ul> <li>Each accent color also has to have a color contrast of at least 4.5:1 against <code>--gin-color-button-text</code>.</li> <li>Make sure there is a visual difference between the primary and secondary buttons in Forced Colors mode.</li> <li>Add test coverage to Drupal CI for every color combination of every available accent color against the available background color in light and dark mode to avoid regressions on future changes.</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> >>> [!note] Pre-migration files - [primary\_secondary\_button.xlsx\_.zip](https://www.drupal.org/files/issues/2025-02-13/primary_secondary_button.xlsx_.zip) >>>