Improve text color discoverability by using the industry name "Text color" and the "A" icon

[paulopmt1]

What problem does this address?

Currently, our text color button is called "Highlight" which doesn't reflect its function properly:

What is your proposed solution?

Historically, software editors use the A icon to change a text color. My proposal is that we change:

• The icon using the default A one
• The name for Text color instead of Highlight

Some examples

• Canva uses "Text color" with a colorful icon:

• Google docs also uses "Text color":

[t-hamano]

Thanks for the report.

The Highlight allows us to change both the text color and the text background color. If they are changed, the icon will change to an "A" icon and the text color and background color will be applied:

I would be grateful if you could let me know if there is anything we can improve about this UI.

[paulopmt1]

Oh, now I understand why we call it Highlight. In that case, I'd keep the Highlight and add a new Item called Text color before it since it's more used than the Highlight itself.

If adding another menu is a problem, I'd just rename it to Text color (and change the icon) because is better to have a highlight feature hidden inside a Text color than the opposite as we have currently, as changing the text color is something more used than changing a text background color.

For future readers, this is what @t-hamano is talking about, we have two tabs inside the same button:

[snehapatil2001]

@paulopmt1 @t-hamano I propose renaming the 'Highlight' button to 'Color'. This would make the interface clearer and more intuitive by grouping both color-related options under a single, neutral label.

[t-hamano]

@snehapatil2001 Thank you for your suggestion.

In #34680, where this feature was implemented, the original label was "Color", but it seems that the final label was decided to be "Highlight" based on the feedback from this comment.

I think we need copy feedback and design feedback on whether to change this label to "Color". Personally, I think the label "color" is easier to understand.

cc @WordPress/gutenberg-design @annezazu

[jasmussen]

I'd not rename to Color, as that's used for the panel and refers to colors of a block level nature. "Text color" or "Highlight color" could be fine.

An icon change can also work, as can the "A", though I would not change the colors of the icon itself as here, it doesn't have precedence in the UI elsewhere to do that, and might disorient. What we can do is the same as the examples mentioned, where there's a color-bar (or two, if you want to show both foreground and background) below the A.

[t-hamano]

This is just a simple mockup, but does it make sense to have separate text and highlight colors?

I used Google Docs as a reference:

[jasmussen]

Might work.

[paulopmt1]

does it make sense to have separate text and highlight colors?

This seems ideal, so users don't need to click on one of them to learn there is a "Text" or "Background" color to change.

[autumnfjeld]

This is just a simple mockup, but does it make sense to have separate text and highlight colors?

Yes, this mockup is great @t-hamano. It is so much clearer. This labeling follows what is standard in editing software.

[kristastevens]

Hello from Editorial! 👋 Just jumping in to respond to the "Needs Copy Review" ping.

It looks like you've come up with a great solution here—no input needed on our end.