Text Emphasis Color: Complete Guide to CSS Emphasis Marks

What is Text Emphasis Color?

The text-emphasis-color CSS property sets the color of emphasis marks applied to text. These marks appear above or below each character (excluding spaces and control characters), providing a visually distinct way to highlight important terms, phrases, or concepts within your content.

This property is part of the CSS Text Decoration Module Level 3 specification, which defines how browsers handle text emphasis marks. Understanding this property is essential for developers working with multilingual websites that include East Asian languages, as well as for designers seeking unique typographic effects in their projects.

Our /services/web-development/ team regularly applies these CSS techniques to create culturally appropriate and visually engaging web experiences for diverse audiences.

The CSS Text Emphasis Property Family

The text-emphasis functionality consists of three distinct properties:

• text-emphasis-style: Defines the shape and style of the emphasis marks
• text-emphasis-color: Sets the color of these marks
• text-emphasis-position: Controls where marks appear (over, under, right, left)

The text-emphasis shorthand combines style and color in a single declaration.

Syntax and Values

Accepted Color Values

The text-emphasis-color property accepts any valid CSS color value:

• Named colors: red, blue, green
• Hexadecimal: #ff0000, #3498db
• RGB/RGBA: rgb(255 0 0), rgba(255, 0, 0, 0.8)
• HSL/HSLA: hsl(0 100% 50%)
• currentColor keyword: currentColor (initial value)
• transparent: transparent

The currentColor value makes emphasis marks inherit the current text color, ensuring consistent styling without explicit color declarations.

Complete Syntax

/* Longhand property */
text-emphasis-color: #d55;

/* Shorthand combining style and color */
text-emphasis: filled triangle #d55;

/* Using currentColor for automatic color inheritance */
text-emphasis: filled circle currentColor;

/* Explicit color declaration */
text-emphasis-color: rgb(213 85 85);

The shorthand text-emphasis syntax follows: text-emphasis: [text-emphasis-style] [text-emphasis-color];

Practical Examples

Basic Emphasis Mark Application

.important-text {
 text-emphasis-style: filled circle;
 text-emphasis-color: #d55;
}

Custom Shapes with Colors

/* Different shapes available */
.filled-circle {
 text-emphasis: filled circle #e74c3c;
}

.open-circle {
 text-emphasis: open circle #3498db;
}

.triangle {
 text-emphasis: filled triangle #2ecc71;
}

.sesame {
 text-emphasis: filled sesame #9b59b6;
}

Custom String Marks

/* Use asterisks for emphasis */
.asterisk-emphasis {
 text-emphasis: "*" #e67e22;
}

/* Use Chinese character for cultural context */
.chinese-emphasis {
 text-emphasis: "点" #c0392b;
}

Position Control

/* Marks above text */
.above-text {
 text-emphasis: filled circle #d55;
 text-emphasis-position: over;
}

/* Marks below text */
.below-text {
 text-emphasis: filled triangle #3498db;
 text-emphasis-position: under;
}

/* Marks to the right */
.right-text {
 text-emphasis: filled dot #2ecc71;
 text-emphasis-position: right;
}

Browser Compatibility

The text-emphasis-color property has excellent support across modern browsers:

The property is considered "Baseline Widely Available" as of March 2022, indicating comprehensive support across devices and browser versions.

Vendor Prefixes

For older WebKit-based browsers, you may need vendor prefixes:

.emphasis-example {
 -webkit-text-emphasis: filled circle #d55;
 text-emphasis: filled circle #d55;
}

Accessibility Considerations

Contrast Requirements

Ensure adequate contrast between emphasis mark colors and the background. WCAG 2.1 guidelines recommend:

• 4.5:1 contrast ratio for normal text
• 3:1 contrast ratio for large text

Screen Reader Considerations

Emphasis marks are purely visual and do not convey meaning to screen readers. If emphasized text carries semantic importance, consider:

• Using <strong> or <em> HTML elements for semantic emphasis
• Adding aria-label attributes when visual emphasis needs screen reader announcement
• Documenting emphasis conventions in your design system

Motion Sensitivity

Users with motion sensitivity may prefer reduced emphasis mark display:

@media (prefers-reduced-motion: reduce) {
 .emphasis-marks {
 text-emphasis-style: none;
 }
}

For comprehensive accessibility guidance in your web projects, our /services/web-development/ team follows WCAG guidelines to ensure all typography choices are inclusive.

Integration with Design Systems

CSS Custom Properties

Use CSS custom properties for maintainable emphasis color management:

:root {
 --emphasis-primary: #d55;
 --emphasis-secondary: #3498db;
 --emphasis-success: #2ecc71;
 --emphasis-warning: #e67e22;
 --emphasis-error: #e74c3c;
}

.emphasis-primary {
 text-emphasis: filled circle var(--emphasis-primary);
}

Design Token Integration

Map text-emphasis-color values to design tokens:

:root {
 --color-emphasis-default: currentColor;
 --color-emphasis-accent: var(--color-primary-500);
 --color-emphasis-subtle: var(--color-gray-600);
 --color-emphasis-success: var(--color-success-500);
 --color-emphasis-warning: var(--color-warning-500);
 --color-emphasis-error: var(--color-error-500);
}

Line Height Considerations

Since emphasis marks can extend above or below text baseline:

.emphasized-content {
 text-emphasis: filled circle #d55;
 line-height: 1.8;
}

Learn more about creating cohesive design systems by exploring our guide to /resources/docs/web-design/ui-design/ which covers typography best practices and design token strategies.

Sources

1. MDN Web Docs - text-emphasis-color
2. Tillitsdone - Mastering CSS text-emphasis for Enhanced Typography
3. W3C CSS Text Decoration Module Level 3