Styling and contrast issues in the toolbar configuration fieldset for a text format

Created on 13 February 2025, about 2 months ago

Icons have a too low color contrast, with them in close proximity within a toolbar tray it is close to impossible to recognize the individual touch targets, which means a low affordance in consequence. And the purpose of that component is about interacting, and rearranging those icons and not just pressing the buttons like on node edit forms (See the table in https://docs.google.com/spreadsheets/d/1won35PxhRFexJYE8FmZ4DCNTo7xEAxC8... or text_format.xlsx.zip → for more details).

Discussed and iterated on the issue with @mgifford, @the_g_bomb, @katannshaw, and @drupa11y

Edit a text format on admin/config/content/formats/manage/content_format?destination=/admin/config/content/formats

Since the active toolbar uses a different appearance than the actual CKEditor toolbar on a node edit form it would be a reasonable step to increase the color contrast for the buttons so they meet a color contrast of 3:1 against the background layer (for the available buttons) as well as the toolbar tray background (for the active toolbar buttons).
The toolbar tray border is not available in dark mode and also not relevant anyway, but for the light mode increases the color contrast for the toolbar tray border to a color contrast of at least 3:1, since the toolbar tray background against the background layer has a color contrast of 1:1, therefore a visible border is vital in that case.

🐛 Bug report

Status

Active

Version

4.0

Component

User interface

Created by

🇩🇪Germany rkoller Nürnberg, Germany

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.

Comments & Activities

Production build 0.71.5 2024