Using CSS text-underline-offset for Accessible Links

The CSS text-underline-offset property allows developers to adjust the vertical distance between text and its underline, significantly enhancing readability and web accessibility. By moving the underline away from the text baseline, this property prevents visual collisions with letter descenders, making hyperlinked text easier to distinguish and read for users with low vision, dyslexia, or cognitive impairments.

According to the Web Content Accessibility Guidelines (WCAG), links within blocks of text must not rely solely on color to convey their function. Underlining remains the most universally recognized visual indicator for clickable links. However, default browser underlines often cut directly through letter descenders—such as the tails of "g," "j," "p," "q," and "y"—creating visual noise that disrupts reading flow.

The Role of text-underline-offset

The text-underline-offset property solves this issue by specifying how far below the text baseline an underline should sit. Instead of relying on awkward workarounds like border-bottom or box-shadow, which treat decorative borders as box model elements, text-underline-offset modifies the native text decoration itself.

By introducing negative space between the glyphs and the underline, the property achieves three critical accessibility benefits:

  • Eliminates Visual Collisions: It prevents underlines from cutting through descenders, preserving the natural shape of letters.
  • Improves Legibility: Enhanced letterform clarity benefits users with reading disabilities, such as dyslexia, who rely on distinct character shapes to process text.
  • Maintains Semantic Intent: Because it modifies native text-decoration, screen magnifiers and high-contrast modes render the links more reliably than custom border-based hacks.

Implementation and Best Practices

To implement text-underline-offset effectively for accessibility, use relative units such as em or rem rather than fixed pixels. Relative units ensure that the spacing scales proportionally whenever a user resizes the text or zooms in with a browser.

a {
  text-decoration-line: underline;
  text-decoration-thickness: 0.125em;
  text-underline-offset: 0.25em;
  text-decoration-skip-ink: auto;
}

A recommended offset range is typically between 0.15em and 0.3em. Setting the offset too high can visually detach the line from the text, confusing users about which line of text the underline belongs to. When combined with text-decoration-thickness and text-decoration-skip-ink, text-underline-offset delivers high-contrast, highly legible links that meet modern inclusive design standards.