如果可以访问颜色，是否可以访问这些颜色之间的渐变? [英] If colours are accessible, will a gradient between those colours be accessible?

问题描述

我在绝对必须具有可访问性的网站上工作，我们的目标至少是AA标准.通常，我们使用诸如 https://contrast-ratio.com 和

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.

在这种情况下，让我们以18px大小的白色(#fff)文本为例.颜色一:#546FAF的比例为4.92颜色二:#B349B1的比率为4.66

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

如果我在这两种颜色之间建立了线性渐变作为背景，那么18px处的#fff文本是否可以安全访问?我已经尝试过在看起来很接近的文本附近选择颜色，但是希望这是一个简单的答案，因为它永远不会低于4.5的比率.

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.

谢谢！

推荐答案

是的，如果两种颜色都通过了对比度测试，那将是安全的，但这是假设在较暗的渐变背景上为白色(如您所指出的)，对于渐变背景上的深色是相反的.

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.

两种颜色之间的对比度基于亮度，使用以下公式:-

(L1 + 0.05)/(L2 + 0.05)

其中L1是相对亮度较浅的颜色，

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

和L2是较暗的相对亮度颜色.

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

因此，由于在两个相似的亮度值上，中间的渐变趋于变暗，因此您可以看到中间的对比度会增加(随着接近黑色，L2会降低， L1 不会)改变).因此，整个颜色范围将超过阈值，而最高的对比度趋向于中心.

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.

但是，如果您使用深色作为前景色，那么当中间的渐变变暗时，对比度会降低( L2 不变， L1 减少).

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).

这篇关于如果可以访问颜色，是否可以访问这些颜色之间的渐变?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！