Contrib.social

Seven's focused/hovered tabs do not meet WCAG AA 1.4.3 for contrast

Open on Drupal.org →
Created on 12 May 2018, about 7 years ago
Updated 1 June 2025, 2 days ago

Seven's tabs styling uses a brighter colour foreground text colour for a tab with a :hover or :focus state:

.tabs__tab:hover,
.tabs__tab:focus {
  color: #008ee6;
  background-color: #fafaf7;
}

This brighter blue (#008ee6) means that the foreground text and the background colour do not have sufficient contrast to meet WCAG AA. The ratio is 3.34:1 when it should be at least 4.5:1.

To reproduce,
1. Login to Drupal 8
2. Navigate to /admin/content
3. Use developer tools to simulate a hover/focus state on an inactive tab and check the foreground text to background colour contrast ratio

🐛 Bug report
Status

RTBC

Version

1.0

Component

Code

Created by

🇬🇧United Kingdom Phil Wolstenholme

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.

  • Needs accessibility review

    Used to alert the accessibility topic maintainer(s) that an issue significantly affects (or has the potential to affect) the accessibility of Drupal, and their signoff is needed (see the governance policy draft for more information). Useful links: Drupal's accessibility standards, the Drupal Core accessibility gate.

Sign in to follow issues

Merge Requests

Comments & Activities

Not all content is available!

It's likely this issue predates Contrib.social: some issue and comment data are missing.

contrib.social Blog FAQ Discussions
Production build 0.71.5 2024