Problem/Motivation

Some titles in the preview section on the edit page of the edit content view admin/structure/views/view/content have a too low color contrast. The h1s with a class of section-title have a contrast ratio of 3.9:1. For regular text 4.5:1 would be required.

lower part of the content views preview section showing contrast errors with tota11y

*visualised with the tota11y bookmarklet but cross checked with the color contrast anaylizer

Steps to reproduce

- Go to admin/structure/views/view/content
- Check one of the section-titles: Title, Exposed Filters, Content or Pager in the Preview section as well as the edit view name/description and Cancel button in the Displays section

Support from Acquia helps fund testing for Drupal Acquia logo

Comments

rkoller created an issue. See original summary.

rkoller’s picture

Title: The section-titles on views edit pages within the preview sections have a too low contrast » A few section-titles and two grey buttons on views edit pages have a too low contrast
Issue summary: View changes
rkoller’s picture

Issue summary: View changes
FileSize
182.19 KB
rkoller’s picture

Issue summary: View changes

Extended the scope of the issue by adding the two grey buttons on grey background. Changed the title and updated the IS

rkoller’s picture

Issue summary: View changes
rkoller’s picture

Title: A few section-titles and two grey buttons on views edit pages have a too low contrast » The section-titles in the preview section on views edit pages have a too low contrast
rkoller’s picture

I've updated the title and IS of the issue. I've removed the part about the buttons since those got a dedicated issue now at https://www.drupal.org/project/drupal/issues/3272266 . so the scope of this issue is simply focused on a single element and the buttons topic applies also to several pages across the admin interface this issue here only to the preview section on a views edit page.

mherchel’s picture

Status: Active » Needs review
Issue tags: +Accessibility, +contrast, +CSS
FileSize
997 bytes
1011 bytes

Quick fix. I updated the color from #818181 to var(--color-gray-800) (#55565b), which has a 7.32:1 contrast ratio.

rkoller’s picture

Status: Needs review » Reviewed & tested by the community
FileSize
51.84 KB
51.83 KB

cool thank you! I've applied the patch and everything looks good and correct. For comparison three of the headlines before the patch:
views edit page showing three headlines with a too low color contrast
and after the patch:
views edit page showing three headlines with a correct color contrast
Setting the issue to RTBC, since the hex color as well as the variable is taken from the new Claro grey scale ( https://www.drupal.org/project/drupal/issues/3154539 ) and those two lines are the only changes for the patch.

  • ckrina committed 40ad2f7 on 10.0.x
    Issue #3266216 by mherchel, rkoller: The section-titles in the preview...

  • ckrina committed 22dab5e on 9.4.x
    Issue #3266216 by mherchel, rkoller: The section-titles in the preview...
ckrina’s picture

Status: Reviewed & tested by the community » Fixed

Committed 40ad2f7 and pushed to 10.0.x and 9.4.x. Thanks!

Status: Fixed » Closed (fixed)

Automatically closed - issue fixed for 2 weeks with no activity.