Editing Colors for Hyperlinks in Hover State
May 19, 2021
Help! My Rise course can't pass the 508c test for color-contrast for hyperlinks in hover state. The theme colors that I selected based on the color palette for the client become too faded on hover. I want to keep the theme color to align with the client's branding, but I can't seem to do that and make the hyperlinks work.
I'd like to edit the CSS file of the published output to change the hyperlink hover colors, or remove the hover state altogether. I can get to the CSS file, but can't figure out which one relates to the hover color. Has anyone been able to change the hover defaults?
For others who may have this challenge, another temp solution is to change the background of the hyperlink to a really dark color (almost black) with a white font. It's not very attractive, so I'm hoping this is a last resort. Novel ideas and CSS wizardry are very much appreciated!
2 Replies
Hello, Delphinia!
There's an easy way to choose a different text color for hyperlinked text. The trick is to set the color before adding the hyperlink.
First, highlight the text and change the color to your desired color, and underline the text. Then, highlight the text again and add the hyperlink.
Now the text will be hyperlinked and underlined in your desired font color!
Thanks, Alyssa. The issue is with the color of the link in the hover state, which seems to be automatically set based on the color of the linked text in its normal state. I tried what you suggested and it doesn't really work for any color except black. From what I can tell the only way to override the automatic hover state color is to update the CSS file. I would also be happy with just turning the hover state off in the published CSS file, but I'm not sure how to do that.