Improve icon color contrast for WCAG 2.1

Created on 20 September 2017, about 7 years ago
Updated 9 May 2024, 7 months ago

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

πŸ› Bug report
Status

Active

Version

11.0 πŸ”₯

Component
OtherΒ  β†’

Last updated about 4 hours ago

Created by

πŸ‡ΊπŸ‡ΈUnited States travis.d.peltier

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

Not all content is available!

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

Production build 0.71.5 2024