How to Inspect and Control CSS text-decoration-color in Safari Web Inspector

In modern web typography and interface design, decoupling text glyph colour from text decoration colour is essential for creating accessible, visually distinct user experiences. Historically, CSS text underlines, overlines, and line-throughs automatically inherited the foreground color of the text, often resulting in heavy, distracting lines or unreadable hyperlinks. The CSS Text Decoration Module Level 3 standardises text-decoration-color, allowing web designers to style text decoration strokes independently of the font glyphs. In Safari on macOS and iOS, WebKit renders decoration strokes using Apple’s Core Graphics engine with full support for modern CSS Color Module Level 4 spaces, including wide-gamut Display P3, OKLCH, and semi-transparent alpha channels. Using Safari Web Inspector, developers can inspect computed colour values, test wide-gamut colour gamuts, verify WCAG contrast compliance, and live-edit decoration colours in real time.

Syntax and Behaviour of CSS text-decoration-color in WebKit

The text-decoration-color CSS property specifies the colour of lines drawn by text-decoration-line (such as underline, overline, or line-through). WebKit supports a comprehensive spectrum of colour declarations:

• currentcolor (Initial Value): Inherits the computed value of the element’s color property. If no custom decoration colour is specified, the underline or strike-through matches the text glyphs.
• Standard Named and Hex Colours: Traditional formats such as #0070c9, rgb(0, 112, 201), or named CSS colours.
• Display P3 Wide-Gamut Colours: Formats such as color(display-p3 0.05 0.45 0.95) allow rich, saturated vibrant colours to render accurately on Apple Retina displays that support the DCI-P3 wide colour space.
• Perceptually Uniform Colour Models (OKLCH / LCH): Modern functions such as oklch(60% 0.15 240) allow predictable perceptual lightness and chroma scaling across dark and light interface modes.

When combined with text-decoration-thickness and text-underline-offset, text-decoration-color enables subtle, low-contrast underlines (such as semi-transparent accents) that do not interfere with text legibility.

Enabling Safari Web Inspector and Selecting Styled Text

To inspect and control text decoration colours in Safari:

1. Confirm Developer Features are active by navigating to Safari > Settings > Advanced (or Preferences) and verifying that Show features for web developers is selected.
2. Right-click the text element featuring the underline or strikethrough (such as a navigation hyperlink, headline, or deletion span) and choose Inspect Element.
3. The Web Inspector opens directly into the Elements panel, highlighting the target DOM node within the document hierarchy.

Inspecting Decoration Colours in the Styles and Computed Panes

Review the element’s cascading rules in the Web Inspector sidebar:

• Styles Pane: Review all active CSS rules targeting the element. Check whether text-decoration-color is declared explicitly or as part of a modern composite shorthand (e.g. text-decoration: underline solid #0070c9 2px). If the property is struck through, inspect parent rules for higher-specificity overrides or legacy resets.
• Colour Preview Swatch: In Safari Web Inspector, every colour property displays an interactive colour swatch adjacent to the declaration value. Clicking this swatch opens Safari’s built-in colour picker palette, allowing real-time hue and opacity adjustments.
• Computed Pane: Switch to the Computed tab and search for color. The Computed panel reveals the resolved sRGB or Display P3 value passed to Core Graphics for rasterisation.

Live-Testing and Customising Decoration Colours Interactively

Safari Web Inspector allows real-time interactive adjustments directly within the rule declaration block. Double-click the style block in the Styles tab to test different colour treatments:

/* Example: Subtle, high-legibility link underline using opacity */
.article-link {
    color: #1d1d1f;
    text-decoration-line: underline;
    text-decoration-color: rgba(0, 112, 201, 0.4);
    text-decoration-thickness: 1.5px;
    text-underline-offset: 3px;
    transition: text-decoration-color 0.2s ease-in-out;
}

.article-link:hover {
    text-decoration-color: rgba(0, 112, 201, 1.0);
}

/* Example: Vibrant wide-gamut accent line on Retina displays */
.hero-accent {
    color: #000000;
    text-decoration-line: underline;
    text-decoration-color: color(display-p3 1 0.1 0.3);
    text-decoration-thickness: 3px;
}

Clicking the colour swatch allows you to switch between HEX, RGBA, HSL, and Display P3 representations with a single click, providing immediate visual feedback in the live browser viewport.

Evaluating Accessibility and Contrast Ratios

When designing hyperlinks and semantic text highlights, keep accessibility guidelines in mind:

• 3:1 Non-Text Contrast Compliance: Under WCAG 2.1 guidelines (Success Criterion 1.4.11), visual indicators used to distinguish hyperlinks from surrounding body text—such as underlines—must maintain a contrast ratio of at least 3:1 against the background surface if colour alone is not used to convey the link.
• Subtle Alpha Underlines: While setting text-decoration-color: rgba(..., 0.3) creates elegant modern styling, excessively low alpha values (below 30%) can become invisible to low-vision users on low-contrast displays. Use WebKit’s built-in Contrast Ratio inspector to verify compliance.
• Dark Mode Adaptation: Ensure decoration colours adapt to dark mode using CSS @media (prefers-color-scheme: dark) or dynamic CSS custom properties, preventing high-contrast glare or unreadable dark underlines on black backgrounds.