Improving link legibility with two lines of CSS

Links in body copy should pretty much always be underlined.

A brief aside… I had previously assumed that certain colors that aren’t affected by common types of color blindness (like certain shades of blue) provided sufficient contrast and did not need to be underlined. Then I learned that I was wrong.

Sleep disorder: I have to read after 5pm with f.lux cranked up all the way, so sites that assume hyperlinks can be blue w/no underline…

However, underlines introduce their own accessibility challenges.

For people with certain types of visual impairments (low vision and dyslexia, for example), underlines that cut through descenders on letters (the dip below the imaginary “line” caused by lower case g, y, and so on) can make text difficult to read and understand.

Print figured this out years ago, and breaks the underline for those descenders. And now, you can achieve the same affect with CSS.

For a short while, you could use the text-decoration-skip property set to ink.

a {
    text-decoration: underline;
    text-decoration-skip: ink;
}

This has since been moved to it’s own property: text-decoration-skip-ink, with a value of auto. Browser support is spotty, so for now, use both.

a {
    text-decoration: underline;
    text-decoration-skip: ink;
    text-decoration-skip-ink: auto;
}

That will make a link like this.

Look like this instead.