Links and other call to action elements

Whenever possible, provide link text that identifies the purpose of the link without needing additional context. This is really helpful for screen reader users because they might be viewing just the links on a page.

You should avoid non-specific links, such as "read more", "learn more" "click here" and similar. These conceal the action of the link and require people to read the surrounding text. Also, people often skim a page, and having vague link texts makes skimming a lot less effective. This also applies to buttons and any other call-to-action elements.

Styling these elements

A really good piece of advice is to pick one style and stick to it. If every element has a different kind of link style, it can get confusing. And your general theme won't look unified. Of course, if you have light and dark backgrounds, you might need to have different versions of the links and buttons to make sure they have enough contrast on all backgrounds.

Remember also that the focus style for these elements should be different than the hover style. You might have to focus on a different element than what the mouse is hovering, and if the styles are identical, it's harder to know which is which. In WCAG 2.2 there are currently planned two criteria to improve the element focuses. If you're interested in what the criteria currently look like, check out the What's New in WCAG 2.2 Working Draft page for all the latest info on these.

Buttons

A button with a distinguishing indicator such as position, text style, or context does not need a contrasting outline/edge, although some users are likely to identify it more easily with a contrasting edge. Buttons need to adhere to the Non-text Contrast rules. I recommend reading the Understanding Success Criterion 1.4.11: Non-text Contrast page for visual examples of buttons and also other non-text elements. 

But remember that the more you provide visible cues to your users about elements, the clearer their experience will be. So consider if your buttons could use a border or a background color to make them easier to spot.

Links

Don't use the style you pick for your links in any non-interactive elements. I often see websites with a picked link color, let's say blue. And then that same blue is used in headings that are not links. It gets quite confusing and you no longer know what are links and what are not. And an even worse design I've seen has been that some of these identical blue headings have links and some don't. I did not like that user experience.

If you choose to use bold and color as your link indicator inside text content, you really can't use regular bold text anymore. Because in that case, all that would separate bold text from links would be color. So pay attention to the way you design your links.

WCAG criterion 1.4.1 specifies that color cannot be used as the only visual means of conveying information, indicating an action, prompting a response, or distinguishing a visual element. One example where this criterion often fails is links. Links should be styled with more than just color change. Combine the use of color with an underline or different font weight to make links more recognizable. Note! The visual cue cannot be provided on hover, it will fail the criterion.

Red and pink are the same color (hue) but they have different lightness (which is not color). So red and pink would pass the requirement for "not distinguished by color (hue) alone" since they differ by lightness (which is not color) - as long as the difference in lightness (contrast) is 3:1 or greater. For example, if the surrounding text is red and the link is pink it would pass. Similarly, light green and dark red differ both by color and by lightness so they would pass if the contrast (lightness) difference is 3:1 or greater before focus or pointing.

For usability and accessibility, links should be underlined by default. Otherwise, link text must have at least 3:1 contrast with surrounding body text and must present a non-color indicator (typically underline) on mouse hover and keyboard focus. In addition, both links and body text must have at least 4.5:1 contrast with the background (3:1 for large text) to meet WCAG 2 Level AA. WebAIM

It is recommended to provide users with information about external links. This is not required, but it makes your links clearer for your users. You can, for example, use the icon symbolizing external links.

Links should be tested with a grayscale test. The links should still be obvious when it's in grayscale and not blend in with the non-clickable text. When you use other visual cues than just color, it's easier to make the links clear. Other than visual cues are, for example, underlines and bold. It is often recommended that you use underline with links that have surrounding text and bold for standalone links. Nothing says you can't use both if you want to.

Remember to always check your link color's contrast, I really like using WebAIM's Link Contrast Checker because I can easily enter background, text, and link colors.