The state of toggle buttons is conveyed only via color with low contrast

[Comandeer]

Is this a bug report or feature request? (choose one)

🐞 Bug report

💻 Version of CKEditor

https://ckeditor.com/docs/ckeditor5/latest/examples/builds/classic-editor.html

📋 Steps to reproduce

1. Press "Bold" button.

✅ Expected result

The contrast between the button's background and toolbar is at least 3:1.

❎ Actual result

The contrast between the button and toolbar is around 1.28:1

📃 Other details that might be useful

[mlewand]

A way that CKE4 mitigates this issue is by adding an extra outline to the button.

Let's see what are the options to satisfy this requirement.

See:

• https://www.w3.org/WAI/WCAG21/Understanding/non-text-contrast.html
• https://www.w3.org/WAI/WCAG21/Understanding/contrast-minimum.html

Another option is to do what Google docs is doing: the background color of the icon changes ever so slightly but the icon color is changed significantly and it satisfies level AA contrast requirements. We have bunch of predefined CSS colors that might or might not be used for it.

[wimleers]

The outline sounds like a fine solution but IIRC @Reinmar indicated that this was considered too visually disruptive for the design.

@lauriii indicated similar challenges in the work he did on https://www.drupal.org/project/claro — this aspect was one of the most challenging problems!

FYI: tracking this at https://www.drupal.org/project/drupal/issues/3283803 😊

[mlewand]

Lets mock quick and dirty examples based on https://github.com/ckeditor/ckeditor5/issues/1405#issuecomment-1152234595 and put screenshots here.

[oleq]

Some rough ideas:

[mlewand]

Blocked by #11989