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

Open on Drupal.org →

Created on 13 February 2025, 5 months ago

Problem/Motivation

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).

In dark mode the fieldset border is barely visible
The toolbar configuration fieldset is missing padding on the left and right

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

Steps to reproduce

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

Proposed resolution

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.

Remaining tasks

User interface changes

API changes

Data model changes

🐛 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.

Drupal CMS a11y

wcag1411

Sign in to follow issues

Comments & Activities

Issue created by @rkoller
Comment 5 months ago →
🇨🇦Canada mgifford Ottawa, Ontario
This is a useful took to find a better foreground-background color combination https://contrast-finder.tanaguru.com/

Note that opacity is something missed by most color contrast tools that are comparing foreground/background colors.

These seem to support it:

https://www.siegemedia.com/contrast-ratio

https://www.sbwfc.co.kr/color-contrast-checker/
Comment 9 days ago →
🇨🇦Canada mgifford Ottawa, Ontario
I think this color contrast looks good #000000 / #EEEEEE .

If you wanted the edge of the button to have contrast so that it sits above the FFF you could argue for:
#8A8A8A / #FFFFFF

As a background for the button. But I don't think that is what is generally needed for.

Mind you that does seem to be what is suggested here:
https://www.w3.org/WAI/WCAG21/Understanding/non-text-contrast.html#symbo...

I gotta say the grey buttons are ugly.

I'm also not convinced this is a Gin issue, as it is common in any CKEditor config here admin/config/content/formats/manage/content_format

Comment about 21 hours ago →

🇨🇦Canada mgifford Ottawa, Ontario

I think this would be better:

.ckeditor5-toolbar-item {
  border: 1px solid #8A8A8A;
}

.ckeditor5-toolbar-disabled .ckeditor5-toolbar-item {
  border: 1px solid #8A8A8A;
}

contrib.social Blog FAQ Discussions

Production build 0.71.5 2024