Toolbar button focus indication has too low contrast

[mlewand]

📝 Provide detailed reproduction steps (if any)

1. Open an example editor with toolbar.
2. Press alt + f10 to focus the toolbar.
3. Examine focus outline color.

✔️ Expected result

The contrast ratio of the outline to background should meet at least WCAG level AA standard.

❌ Actual result

Contrast is too low and doesn't match WCAG level AA. It's 1.36:1 (#C5DAF8 to #FAFAFA).

📃 Other details

• CKEditor version: 12.4.0

---

If you'd like to see this fixed sooner, add a 👍 reaction to this post.

[mlewand]

For anyone facing this issue there's a simple workaround that require you to add CSS like the following:

.ck-editor .ck.ck-button:active, .ck-editor .ck.ck-button:focus, .ck-editor a.ck.ck-button:active, .ck-editor a.ck.ck-button:focus {
	box-shadow: 0 0 0px 3px #1250A5;
}

You can see it here https://codepen.io/mlewand/pen/yLLOyME