问题
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!
回答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).
回答2:
Is your text bold too? If so, the min color contrast requirement would then be changed to 3:1 since the text would be large text (18px+bold).
According to Webaim, “Large text is defined as 14 point (typically 18.66px) and bold or larger, or 18 point (typically 24px) or larger.”
I know you’re aware of contrast checker but I want to call out that a tool can actually tell you whether the contrast is accessible on that gradient background if you test your content on that gradient using accessibility insights for web by Microsoft. The Fastpass feature will tell you that in seconds.
Lastly, the guidelines intent is to make it accessible to everyone so if despite the numbers and thresholds if it’s hard to read, tune it a better contrast ratio so that it is easily readable. E.g., most designs on csszengarden.com website are accessible according to these automated tools but in practical it is not really accessible.
来源：https://stackoverflow.com/questions/60060018/if-colours-are-accessible-will-a-gradient-between-those-colours-be-accessible