Problem/Motivation

Some of the icons in Drupal core icons have low colour contrast.

It's expected that some do not have sufficient contrast to satisfy the forthcoming WCAG 2.1 update, which introduces new success criteria for colour contrast of UI graphics (such as icons and buttons): Success Criterion 1.4.11 Non-text Contrast

We should review our icons as part of our overall WCAG 2.1 plan - #2864791: Implement new Success Criteria from WCAG 2.1.

Proposed resolution

Review all our icons, checking for conformance with 1.4.11 Non-text Contrast.
Update designs / colours so the icons have stronger contrast.

Remaining tasks

Review colour contrast for all icons in Drupal core.
Maybe use child issues to address them (individually, or in groups if they are part of a related set).

Icons to review

TODO: clarify exactly which icons we mean (e.g. filenames)

  • toolbar module icons
  • Warning indicator images
  • Contextual link module (FAIL, see comment #5)
  • Search module - the search block's icon button.
  • Shortcut module's star icon
  • RSS icon
  • Forum module icons
  • File type icons
  • default user picture
  • Media module icons
  • settings icon, used in Field UI
  • workspace icons, these have multiple colours
  • icons on status report page
  • summary/details elements - triangular disclosure icon
  • Modules page - help, configure, permissions links (inside collapsible details of enabled modules)
  • Icons for "close" on dialogs + off-canvas
  • CKEditor toolbar theme, possibly file issues with the upstream project
  • drop-button component
  • button icons in Layout Builder module - add section, add block, remove section.
  • OTHERS ?

User interface changes

Design changes! Improve colour contrast for icons across Drupal core.

Affects Bartik, Seven, and some graphics from modules such as Toolbar, Tour, CKEditor, etc.

API changes

None expected.

Data model changes

None expected.

Original report by @travis.d.peltier

IE11 browser

The following items failed color contrast ratio standards:
- Drupal tool icon
- Warning indicator images

Comments

travis.d.peltier created an issue. See original summary.

andrewmacpherson’s picture

andrewmacpherson commented
Title: 508 Color contrast ratio issues » Improve icon colour contrast for WCAG 2.1
Issue summary: View changes
Issue tags: +Accessibility, +wcag21
Parent issue: » #2864791: Implement new Success Criteria from WCAG 2.1

@travis.d.peltier - thanks for filing this issue.

For Drupal core, we are primarily concerned with W3C recommendations (principally WCAG 2.0 and ATAG 2.0 at AA level). We don't specifically aim to satisfy Section 508, which is USA-specific. (If we had to consider all the separate regulations and standards for every country in the world it would be far too much too manage. The long-overdue section 508 refresh is expected to indicate the use of WCAG anyway.)

Technically, images are exempt from WCAG 2.0 success criteria 1.4.3 (which only applies to text). However we do intend to address WCAG 2.1 in time, and these images will fall under the new Success Criterion 1.4.11 Graphics Contrast. So this is definitely a live issue :-)

I've made this issue part of our overall plan to address WCAG 2.1 in Drupal core, and refined the issue scope. We'll probably spin off some child issues for individual icons.

andrewmacpherson’s picture

andrewmacpherson commented
Issue tags: +Bartik, +Seven, +Needs design review

Nothing done as yet, just alerting interested parties :-)

travis.d.peltier’s picture

travis.d.peltier commented

Thank you for the reply and I will continue to monitor. :)

andrewmacpherson’s picture

andrewmacpherson commented
Issue summary: View changes
Issue tags: +Out of the Box Initiative

Expanded the list of icons to review.

The contextual link buttons currently fail WCAG SC 1.4.11 Non-text contrast.

Also should review how icons look on Umami theme. For example, the buttons from Contextual Links module (border: #CCC currently) will be overlaid on top of Bartik's blue and white backgrounds, AND Umami's pink-beige background. So either the module CSS colours need to work for both, OR a theme can provide it's own colours for contextual link buttons.

andrewmacpherson’s picture

andrewmacpherson commented
Issue summary: View changes

The "Graphics Contrast" and "User Interface Component Contrast" success criteria were merged into "Non-text contrast" in the final version of WCAG 2.1

andrewmacpherson’s picture

andrewmacpherson commented
Issue summary: View changes
avpaderno’s picture

avpaderno
he/him
Primary language Italian
Location Brescia, 🇮🇹 🇪🇺
commented
Version: 8.3.7 » 8.9.x-dev

Version: 8.9.x-dev » 9.1.x-dev

Drupal 8.9.0-beta1 was released on March 20, 2020. 8.9.x is the final, long-term support (LTS) minor release of Drupal 8, which means new developments and disruptive changes should now be targeted against the 9.1.x-dev branch. For more information see the Drupal 8 and 9 minor version schedule and the Allowed changes during the Drupal 8 and 9 release cycles.

Version: 9.1.x-dev » 9.2.x-dev

Drupal 9.1.0-alpha1 will be released the week of October 19, 2020, which means new developments and disruptive changes should now be targeted for the 9.2.x-dev branch. For more information see the Drupal 9 minor version schedule and the Allowed changes during the Drupal 9 release cycle.

mgifford’s picture

mgifford
he/him
Primary language English
commented
Issue tags: +wcag1411

tagging

Version: 9.2.x-dev » 9.3.x-dev

Drupal 9.2.0-alpha1 will be released the week of May 3, 2021, which means new developments and disruptive changes should now be targeted for the 9.3.x-dev branch. For more information see the Drupal core minor version schedule and the Allowed changes during the Drupal core release cycle.

Version: 9.3.x-dev » 9.4.x-dev

Drupal 9.3.0-rc1 was released on November 26, 2021, which means new developments and disruptive changes should now be targeted for the 9.4.x-dev branch. For more information see the Drupal core minor version schedule and the Allowed changes during the Drupal core release cycle.

Version: 9.4.x-dev » 9.5.x-dev

Drupal 9.4.0-alpha1 was released on May 6, 2022, which means new developments and disruptive changes should now be targeted for the 9.5.x-dev branch. For more information see the Drupal core minor version schedule and the Allowed changes during the Drupal core release cycle.

Version: 9.5.x-dev » 10.1.x-dev

Drupal 9.5.0-beta2 and Drupal 10.0.0-beta2 were released on September 29, 2022, which means new developments and disruptive changes should now be targeted for the 10.1.x-dev branch. For more information see the Drupal core minor version schedule and the Allowed changes during the Drupal core release cycle.

mgifford’s picture

mgifford
he/him
Primary language English
commented
Issue tags: +atag

Version: 10.1.x-dev » 11.x-dev

Drupal core is moving towards using a “main” branch. As an interim step, a new 11.x branch has been opened, as Drupal.org infrastructure cannot currently fully support a branch named main. New developments and disruptive changes should now be targeted for the 11.x branch, which currently accepts only minor-version allowed changes. For more information, see the Drupal core minor version schedule and the Allowed changes during the Drupal core release cycle.

anicoto’s picture

anicoto
Primary language Spanish
Location Houston, TX
commented
Title: Improve icon colour contrast for WCAG 2.1 » Improve icon color contrast for WCAG 2.1

Version: 11.x-dev » main

Drupal core is now using the main branch as the primary development branch. New developments and disruptive changes should now be targeted to the main branch.

Read more in the announcement.