Given a white background, and black or grey text, is there a formula to find a link color with good contrast?

Question

The WCAG guidelines set the following requirements for text/link/background contrast:

• A 4.5:1 contrast between the non-link text color and the background.
• A 4.5:1 contrast between the link text color and the background.
• A 3:1 contrast between the link text color and the surrounding non-link text color.

Assuming that requirement 1 of the above is satisfied, given a white background, and given a (non-link) text color that ranges from black to dark grey, is there a heuristic, formula, or algorithm to find a link color that would satisfy the other two requirements? It would be especially helpful if the algorithm or formula were specified in terms of Hue-Lightness-Saturation. Thank you.

Answer 1

This site will probably help you. It's a contrast checker tool that accepts Hex color codes for the background and text color of what you're working on and outputs the contrast ratio. It will also tell you if you pass or fail for both small and large text.

I would start by choosing the colors that you like and then testing them in the checker to verify that they satisfy the requirements.

If you want a good starting point for selecting colors, take a look at a color wheel.

Colors on opposite sides of the wheel have a lot of contrast while colors adjacent to one another have little contrast.

I also recommend trying out Adobe's color palette tool. I use this for almost every project I work on, usually just to see how I like all of my main colors together. You can let Adobe pick colors for you with settings like "triad" or "complementary" or you can make custom themes.