Ensure that primary and secondary buttons have a high enough color contrast

Created on 13 February 2025, about 2 months ago

Problem/Motivation

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.

Secondary buttons instead consist of just a button border and a button label, they don’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 --gin-color-danger in a few contexts.

There are several occasions in light and dark mode where the accent and or the danger color don’t meet SC1.4.3 for secondary buttons (See the table in https://docs.google.com/spreadsheets/d/1won35PxhRFexJYE8FmZ4DCNTo7xEAxC8... or primary_secondary_button.xlsx.zip 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.

In some contexts secondary buttons are link elements, in this case they have a higher visual affordance than the primary save button.

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.

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

Steps to reproduce

  • Check the buttons on for example admin/structure/views/view/content. For testing the issue in Forced Colors mode make sure that you’ve switched to dark mode before.

Proposed resolution

  • 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 admin/content for micro copy like author names and node titles.
  • Each accent color also has to have a color contrast of at least 4.5:1 against --gin-color-button-text.
  • Make sure there is a visual difference between the primary and secondary buttons in Forced Colors mode.
  • Remaining tasks

    User interface changes

    API changes

    Data model changes

    🐛 Bug report
    Status

    Active

    Version

    4.0

    Component

    User interface

    Created by

    🇩🇪Germany rkoller Nürnberg, Germany

    Live updates comments and jobs are added and updated live.
    • Accessibility

      It affects the ability of people with disabilities or special needs (such as blindness or color-blindness) to use Drupal.

    Sign in to follow issues

    Comments & Activities

    Production build 0.71.5 2024