Inline Links

Accessible links within body text that use underlines and proper contrast to be visible to all users, including those with color blindness.

This is example body text with an inline link that demonstrates proper styling. Links should always be underlined in body text to ensure they're visible even without color. Here's another link for reference.

HTML

<p>This is body text with an <a href="/page" class="ads-inline-link">inline link</a>.</p>

CSS

.ads-inline-link {
    color: var(--ads-primary-color);
    text-decoration: underline;
}

.ads-inline-link:hover {
    color: var(--ads-primary-hover);
}

.ads-inline-link:focus {
    outline: 3px solid var(--ads-focus-outline);
    outline-offset: 2px;
    border-radius: 2px;
}