If colours are accessible, will a gradient between those colours be accessible?

Question

I work on websites where accessibility is an absolute must have, we aim for at least AA standard. Typically we use resources such as https://contrast-ratio.com and https://contrastchecker.com to test a background colour against black or white text.

In this instance let's take white (#fff) text at a size of 18px. Colour one: #546FAF has a ratio of 4.92 Colour two: #B349B1 has a ratio of 4.66

If I made a linear gradient between those two colours as a background, would #fff text at 18px be safe accessibility wise? I've tried colour picking colours near the text that look close, but hoping it's a simple answer of during that gradient it would never go below the 4.5 ratio.

Thanks!

Answer 1

Yes you will be safe if both of your colours pass contrast ratio tests, but this is assuming white on a darker gradient background (as you have indicated), for dark colours on a gradient background the opposite is true.

Gradients of two equal (or nearly equal) luminance values when combined tend to get a slight lower luminance value in the middle.

Contrast between two colours is based on luminance using the following formula:-

(L1 + 0.05) / (L2 + 0.05)

where L1 is the relative luminance of the lighter of the colours,

and L2 is the relative luminance of the darker of the colours.

So because gradients tend to get darker in the middle on two similar luminance values you can see that the contrast ratio will increase in the middle (L2 decreases as it gets closer to black, L1 will not change). For this reason the whole spectrum of colour will be above the threshold, with the highest contrast tending towards the centre.

However if you use a dark colour as the foreground colour, then when the gradient darkens in the middle the contrast ratio will decrease (L2 will not change, L1 will decrease).