Green buttons on drupal.org fail contrast

Created on 27 February 2025, about 1 month ago

Problem/Motivation

The green button on drupal.org fail contrast:

- Get started
- Close x on banner
- Search

Steps to reproduce

1. Log in to drupal.org
2. Go to My dashboard

Expected result: All content meet WCAG 2.1 AA for contrast

Actual result: Get started, Close x on banner, and Search use #7cb04e on #fff, which fails with a contrast ratio of 2.56:1.

Proposed resolution

Change #7cb04e to #3d6f1e on the three links/buttons.

Remaining tasks

User interface changes

API changes

Data model changes

πŸ› Bug report
Status

Active

Version

1.0

Component

User interface

Created by

πŸ‡ΊπŸ‡ΈUnited States charles belov San Francisco, CA, US

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

  • Issue created by @charles belov
  • πŸ‡ΊπŸ‡ΈUnited States charles belov San Francisco, CA, US

    The search button does meet contrast on hover, but hover is not easy on mobile (I've never figured out how to do it), and requires action on the part of the site visitor. It needs to meet contrast when simply viewing the page without taking any action.

    It is especially potentially annoying on Save/Preview/View Changes as they will potentially need to hover over three buttons to find the button they want or even know it exists, since it doesn't even meet 3:1 contrast. But it really needs to meet 4.5:1 contrast, since it's text.

  • πŸ‡ΊπŸ‡ΈUnited States charles belov San Francisco, CA, US
Production build 0.71.5 2024