Quantcast
Channel: Issues for Drupal core
Viewing all articles
Browse latest Browse all 294747

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

$
0
0

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

Chrome dev tools showing a failing contrast ratio of 3.34 for a Seven's tab in the hover state


Viewing all articles
Browse latest Browse all 294747

Trending Articles