Underlined Links

This past week, I participated in the virtual Tastemaker Conference. One of the classes was on accessibility. One thing I never thought about was my website being accessible to people who are color blind. With my current theme, my links aren’t automatically underlined. Without that underline a color blind person may not be able to tell your links which are a different color than regular text are links.

A quick change this morning fixed that problem. I was changed the color of my links to a color that was a better contrast, using this site as a test - https://userway.org/contrast/000000/ffffff

I just wanted to share that with anyone that is interested.

3 Likes

Hey Eric! Great tip. That link is a great way to check your colors.
Did you also underline your links?
I’ve kinda done a deep-dive into accessibility lately, so let me know if you have other questions of what to do or resources!

1 Like

Yes I got them underlined as well.

Can someone show us the code for underlining the links?

I added the following to CSS

a { text-decoration: underline; }

2 Likes

That is exactly what I did as well. Super easy to do.

1 Like

That CSS works! If you want code that is more specific you can use this below. (For WordPress.) For instance, on the Eat Blog Talk membership site when I used the general CSS above, it was underlining social icons and profile images that didn’t need to be, but this worked for the actual content I needed to be underlined.

.hentry .entry-content a {
text-decoration: underline;
}

1 Like

Thank you so much! It worked, and I’ve learned how to do something else!

2 Likes

@Cathy That’s fantastic. I am glad I shared what I did.

1 Like