Text color and highlight buttons in an ASP.NET Core editor

The editor toolbar with text color and highlight buttons

Color draws attention to a warning or a status. RichTextBox has two pickers: forecolor for the text and backcolor for the highlight behind it. Both are in the default and full toolbars.

Add the buttons

<richtextbox name="Body"
             toolbar="{bold,italic,forecolor,backcolor}|{undo,redo}"
             height="300px"></richtextbox>

Select some text and choose a color. The picker offers preset swatches, and you can enter your own value too.

What is saved

The color goes into the HTML as an inline style, so it travels with the content and shows on any page without your stylesheet. That is convenient, and it is also the drawback: changing your brand colors later will not change colors already in saved documents.

Keeping color under control

Many sites end up with articles in six colors. Three ways to limit that:

Leave the buttons out of the toolbar for most users.
Offer the removeformat button, so people can clear what they pasted.
Remove inline color when saving, using the sanitizer's rules on the server if your content must follow a strict design.

Accessibility

Light gray on white is hard to read, and color alone does not reach everyone. Say what is important in words as well. The editor's accessibility checker, the accessibilitychecker button in the default toolbar, flags low contrast.