[upstream] CKE5 toggleable toolbar items not enough contrast

The issue addresses the specific contrast issues reported, but I'm not yet sure that addresses every contrast issue with buttons. There's now sufficient contrast between icons, the button BG and the toolbar BG.

The concern: When a button is "active", it goes from no background to a light blue background. This effectively creates a boundary around the button that qualifies it for using more than color only to convey active state. However, the contrast ration of the button background vs the toolbar containing it is only 1.07. That ratio is low enough I'm concerned this is effectively using color-only to represent active state. I posted a question about this on A11y Slack and will run in by Drupal's maintainers too.

As a makeshift simulation of low contrast sensitivity, I took my laptop outside into the sun and the active state button backgrounds were not at all visible.

I'll get some input on whether or not this meets AA, but even if it does I think an outline or something similarly distinct would improve the accessibility of conveying a button's active state.

Based on some manual checking, my concern regarding active items does not appear to require an upstream fix. Adding an outline to the .ck-on class provides the visual distinction necessary to convey the active state. The outline approach was also the recommendation from everyone I discussed the issue with.

Thanks for the feedback :) I brought it back to the team to discuss the details.

First of all – I want to clarify what was our intention here: We wanted to make the active and non-active buttons distinguishable.

Previously (see e.g. demo of CKEditor 5 v34.0.0), we used only the background of the button to indicate the active state. However, there was not enough contrast between the background of the toolbar (so the inactive button's background) and this color.

We researched a couple of options and came to the conclusion that the best thing we can do is to use a different indicator of the state change than the background color. This new indicator is the color of the face of the button – or in other words, the change of it from the inactive #333 to active #2977FF. This creates a contrast change of 3.11:1.

Thanks to that, the background color change is a secondary indicator and thus doesn't have to meet the contrast criteria.

At the same time the #333 to #FFF and the #2977FF and #F0F7FF colors used for fb/bg of respectively inactive and active buttons easily meet the contrast criteria.

Why the solution with the face of the button? There are of course other options but we had to find the one that:

* will improve the situation right now,
* will not force us to rewrite the entire theme or regress in how well CKEditor 5 blends in external systems (that's the main use case for CKEditor 5, after all).

We know that this is not an ideal solution and I hope we'll find a better one in long term but this one was achievable currently and improves the situation compared to the previous version. We're also aware that WCAG 2.2 introduces new requirements that the current solution may not pass.

[Side note]
It's probably worth mentioning that it's hard to find inspiration in existing applications that would meet all the criteria and still look good. Actually, I don't know any. Most apps do awful jobs differentiating the inactive and active states.

Interestingly, I checked CKEditor 4 for the same scenario and it's far worse, with the border of an active button having only 1.89:1 contrast ratio with the background. So, funnily enough, this specific issue that this thread was about is not a regression.
[/Side note]

Back to CKEditor 5 and your feedback.

From your comments, we noticed that it's confusing what's the purpose and idea behind this change of colors so I wanted to clarify this first. It's not about the backgrounds but about the face of the button.

Now, if we understood the feedback correctly, Patrick pointed out something that we missed – that parts of some of our icons (e.g. left aligned image) use a lighter color (technically, it's an opacity). Because of that contrast drops and these icons:

* Can be considered indistinguishable from each other.
* The part of those icons that are opaque are too small to serve for active/inactive state indicators (considering WCAG 2.2?).

I won't go into the details here but we agree with the feedback. However, this is not something we can change easily and this applies to a small subset of icons. Plus, there's the WCAG 2.1 and 2.2 difference that technically removes at least one of these issues. We'll keep looking for a better solution that we could ship but it won't happen overnight.

Therefore, we wanted to propose that you can override some of our styles to fix the problem for you. And we have two proposals:

* Use an outline around active buttons to remove all the doubts (if there are still any) regarding the color that CKEditor 5 uses for active buttons.
* Disable the opacity of SVG icons that CKEditor 5 uses to remove the problem that Patrick pointed out.

The latter can be done with this rule:

.ck-button:not(.ck-disabled) .ck-icon * {
	opacity: 1 !important;
	fill-opacity: 1 !important;
}

So, to sum up:

* It turned out that this issue existed in CKEditor 4 too.
* CKEditor 5 improved the situation compared to CKEditor 4.
* It's still possible to question CKEditor 5's solution, especially taking WCAG 2.2 into consideration.
* There are workarounds that you can use on your side to remove any doubts.

Based on manual testing, the requirements of addressing the specific bug reported in this issue will successfully be addressed by the next CKEditor 5 release.

The two issues discovered as a result of reviewing those fixes are easily addressable in core, and have their own followups:

• #3306209: Add outline to buttons with active state.
• #3306216: Contrast perception issues with icons including low-opacity fills