Ckeditor5: Should toolbar have a gradient?

[Reinmar]

My feeling is that a gradient is a bit out of fashion. WDYT?

[oleq]

A follow-up of https://github.com/ckeditor/ckeditor5/issues/645.

[oleq]

If we go with the gradient, this one must be fixed:

[scofalik]

I don't like gradient. It looks a bit weird when you hover over icon - the contrast near top of the icon is different than on the below.

[Reinmar]

I was curious how it's going to look without the gradient and I'm not satisfied with this eiter :P

A little darker:

A little ligther:

Current:

[dkonopka]

For me, that gradient in toolbar looks like something is not rendered properly. Also gradient is not working good with states of buttons + arrows in balloons.

IMHO we should try to decide one color, like #f8f8f8 or ~#dadada~ and leave gradients.

Edit: @Reinmar I've meant #fafafa.

[Reinmar]

dadada is a bit too dark IMO... OTOH, https://www.youtube.com/watch?v=lNYcviXK4rg

[Reinmar]

BTW, if we'd remove the gradient and go with a light background then the borders stand out too much.

Is the contrast between borders and the toolbar background important for a11y?

[oleq]

Is the contrast between borders and the toolbar background important for a11y?

Not much. It's more about the design.

[oleq]

BTW: Please make sure you visualize the editor as a part of an environment. Otherwise, it does not make much sense. CKEditor is almost never a standalone application in the web page. It makes a difference.

Gradient

Flat

[Reinmar]

This is a good point. There are, however, many kind of apps to which CKEditor will be injected. I guess you can't look ideal in all of them.

From the two screenshot of CKEditor 5 in Drupal 8 I'm totally ok with both. I guess that the same will be for Wordpress, Neos or whatever else you'd try. Moreover, developers who will be integrating CKEditor 5 into these apps will be able to easily adjust the colors and gradients and everything. Which means that we fully satisfy this requirement (for CKE to be easy to integrate).

What matters now, the most, is the initial look of CKEditor 5 on our websites (docs and ckeditor.com). I'd actually focus on these, if we're talking about putting things into perspective.

[Reinmar]

Interestingly, this gradient is far less visible on my MB Pro than on my Dell external LCD. On my MB Pro it looks good :D I reported the issue when working on the Dell monitor.

[Reinmar]

Result of our discussion with @dkonopka and @oleq. With and without gradient: