Change link color based in background color?

Question

Our white-background webpages use the blue hyperlinks as shown in the image below.

Occasionally we have dash-bordered yellow information sections on a white webpage as shown. In that case someone said the blue hyperlink text was harder to see on their iPad, because there was not enough contrast between that blue and yellow.

If white correlates with the blue shown, is there a color formula to calculate what a darker blue should be for that yellow background?

Answer 1

Comparing the saturation and brightness of white to yellow:

There is a difference of +25 in saturation and -5 in brightness

If blue has S=65 and B=100, the resulting blue would be:

• S 65 + 25 = 90
• B 95 - 5 = 90

Result:

Answer 2

Use Google inspector, they suggest another color that passes AA and AAA

AA : #217387

AAA : #185564

What is AA and AAA ?

These are compliance levels to make digital content more accessible provided by WCAG.

• WCAG 2.0 level AA requires a contrast ratio of at least 4.5:1 for normal text and 3:1 for large text. WCAG 2.1 requires a contrast ratio of at least 3:1 for graphics and user interface components (such as form input borders)
• WCAG Level AAA requires a contrast ratio of at least 7:1 for normal text and 4.5:1 for large text. Large text is defined as 14 point (typically 18.66px) and bold or larger, or 18 point (typically 24px) or larger.

Answer 3

I tried the following:

1. Getting the % R G B difference from white to the blue

2. Applying the % to the yellow.

Result:

Answer 4

The easiest way to achieve what you want is to apply mix-blend-mode: multiply to your link in CSS, which will preserve the current colour when used over white but will darken it proportional to the background.

Having said that, though, you should be aware that there's no rule here that will ensure the link maintains sufficient contrast with both the text and the background. If for some reason you set the background to something like solid red, the link text will become almost black, such that it doesn't have any visible distinction with the surrounding text, and if you set the background to a dark colour, the link will effectively disappear into the background (just as the black text will).

You should consider adding underlines to your links to avoid the first issue (it's a WCAG requirement not to differentiate the behaviour of items by colour alone), and you should consider simply blending the colour yourself to a satisfying value if this is the only alternative background colour you have to deal with.