CSS text-emphasis-color Property

The text-emphasis-color property specifies the color used to paint emphasis marks — the small dots, circles, or other glyphs that can be added to text to indicate emphasis (commonly used in East Asian typography). It controls only the visual color of those marks and does not affect their shape, placement, or whether they are shown; the shape and whether the marks are filled or open is controlled by text-emphasis-style, while the shorthand that sets both style and color together is text-emphasis. Because it targets only the emphasis markers, changing text-emphasis-color leaves the underlying text glyph shapes and layout rules untouched.

By default, emphasis marks inherit the visual presence of the element’s foreground; when no explicit emphasis color is provided, they will typically render using the element’s color. Specifying text-emphasis-color overrides that and lets you create contrast or subtlety between text and marks (for example, a softer marker color for unobtrusive emphasis, or a bright marker for strong emphasis). The property participates in normal cascade and inheritance: it can be set on block containers and passed down, or applied to inline spans to highlight only particular words or phrases.

Practical considerations include accessibility and readability: because emphasis marks are small, their color must maintain sufficient contrast with the text background for them to be perceptible — think of them as part of typographic semantics that should remain readable in high-contrast and low-vision scenarios. Emphasis mark color can be animated or transitioned like other color properties, letting you produce subtle emphasis effects, but keep in mind performance on complex text flows. In vertical writing modes the placement of emphasis marks changes to follow the line direction, so combine text-emphasis-color with appropriate layout settings such as writing-mode as needed. Finally, remember that emphasis marks are distinct from decorations like underlines; if you need to color text decoration lines use text-decoration-color rather than the emphasis-color property.