CSS text-emphasis-color Property

What You’ll Learn

The text-emphasis-color property sets the color of emphasis marks on text characters — the longhand companion to text-emphasis-style.

Introduction

The text-emphasis-color property in CSS allows web developers to set the color of emphasis marks. Emphasis marks are used in East Asian typography to indicate emphasis, similar to how italics or boldface might be used in Western typography.

This property can be particularly useful when you need to ensure that emphasis marks stand out in a way that aligns with your website’s design.

Definition and Usage

Use text-emphasis-color when emphasis marks already exist and you want to control their color separately from the text. Set a mark shape first with text-emphasis-style or the text-emphasis shorthand, then apply your chosen color.

📝 Syntax

The syntax for the text-emphasis-color property is simple. You can specify a color using any valid CSS color value:

element {
  text-emphasis-color: color;
}

Here, color can be a named color, a hexadecimal value, an RGB value, an HSL value, or any other valid CSS color value.

Basic Example

p {
  text-emphasis: circle;
  text-emphasis-color: red;
}

Syntax Rules

• Set an emphasis style before marks become visible.
• Any valid CSS color value works, including currentColor and CSS variables.
• The property is inherited, so parent colors can flow to child elements.
• Use the longhand when you only need to change mark color without changing shape.

Related Properties

• text-emphasis — shorthand for style and color together
• text-emphasis-style — sets the mark shape or custom symbol
• text-emphasis-position — sets whether marks appear over or under text

🎯 Default Value

The default value of the text-emphasis-color property is the same as the currentColor of the element, which means it inherits the color of the text unless you set a different value.

💎 Property Values

The text-emphasis-color property accepts standard CSS color values.

When to Use text-emphasis-color

text-emphasis-color helps you fine-tune emphasis marks without changing their shape:

• Brand alignment — Match emphasis marks to your site accent or warning colors.
• Contrast control — Make marks darker or brighter than body text for readability.
• Multilingual layouts — Use different mark colors per language section.
• Theme switching — Swap mark colors in light and dark modes with CSS variables.

Examples Gallery

In this example, we’ll set the text emphasis color to red, then explore more color patterns.

<style>
  p {
    text-emphasis: circle;
    text-emphasis-color: red;
  }
</style>

<h1>Text with Custom Emphasis Color</h1>
<p>This text has a red emphasis mark.</p>

.vocab-term {
  text-emphasis-style: dot;
  text-emphasis-color: #2563eb;
}

.note-warning {
  color: #ea580c;
  text-emphasis: sesame;
  text-emphasis-color: currentColor;
}

:root {
  --accent-mark: #7c3aed;
}

.lesson-term {
  text-emphasis: dot;
  text-emphasis-color: var(--accent-mark);
}

♿ Accessibility

• Ensure enough contrast — Emphasis mark colors should remain visible against the background.
• Do not rely on color alone — Marks are decorative; use semantic HTML for meaningful emphasis.
• Test in light and dark themes — A mark color that works on white may fail on dark backgrounds.
• Keep text readable — Very bright mark colors can distract from the content itself.

text-emphasis-color in the family

text-emphasis-color controls mark color only. Combine it with text-emphasis-style for the shape, or use the text-emphasis shorthand when you want both in one line.

/* Longhand */
.term {
  text-emphasis-style: dot;
  text-emphasis-color: #dc2626;
}

/* Shorthand equivalent */
.term {
  text-emphasis: dot #dc2626;
}

💡 Best Practices