coding help
Quick Code


Copy to clipboard
<span style="color:blue;">Text goes here.</span>

Text color is a CSS attribute that allows you to change the color of your text. You can use this for inline or external CSS.

When you work with inline CSS, you can apply it to different tags like the <span> tag and the <div> tag.

Changing the Text Color

To change the color of your text, switch to the Source Editor and insert this code: 

<span style="color: navy;">Text goes here.</span>


Now, everything between the opening and span closing tags will have a text color of blue.

You can use any type of valid color in CSS, including:

Use whatever works best for you.

Here are a few examples: 

<span style="color: #00f7ff;">Bright teal text</span>

Bright teal text

And: 

<span style="color: red;">Red text</span>

Red text

Adding Gradient Text

See also: Gradients

You can create gradients for text using a background clipping hack. First, add a background gradient. Then, add the following code to make it clip to the text: 

-webkit-background-clip:text !important; -webkit-text-fill-color:transparent;


Examples:

background: linear-gradient(45deg, DarkTurquoise, green, DarkTurquoise); -webkit-background-clip: text !important; -webkit-text-fill-color: transparent;
background: linear-gradient(to right, FireBrick, orange); -webkit-background-clip: text !important; -webkit-text-fill-color: transparent;


Choose colors carefully. Readability comes first.

The colors you choose should be readable in both light and dark mode. You can't specify a background color on the same span or div as the one you applied this hack to. However, you can specify it on a parent container.

Best practices

On websites like Fandom wikis, users can switch between light and dark mode. Your text color needs to be readable in both modes.

An easy way to do that is to specify a background color. Like this:

Bad: This is easy to read in light mode, but not in dark mode.
Better: We added a background color. Now you can read it in either mode.

Accessibility

Main article: Accessibility

Text color needs to be easy to read. The contrast against the background should be good.

Web Content Accessibility Guidelines (WCAG) defines minimum contrast ratios that colors should have to fulfill the accessibility guidelines. Large and small texts have different minimum contrast ratio requirements. Color contrast checkers can help you check if your colors are easy enough to read.

Also, avoid using neon colors in your designs. These can be overwhelming or painful for readers with sensitive eyes. Calm colors work better.

See also

External links