1

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.

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.

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.

  • Thanks, Ashlee. I'm aware of the tools, but I'm specifically looking for a formal mathematical specification (or something approaching that, in the form of a heuristic), because I need to be able to generate a color with an adequate contrast, given the BG and text color. I'll look further into the notion about colors on opposite sides of the wheel, as this is something that can be utilized pretty easily from HSL values. – Boa Jan 17 '17 at 2:38

Your Answer

By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.

Not the answer you're looking for? Browse other questions tagged or ask your own question.