我前段时间写了个获取柔和背景色的函数, 就是在 hsl 颜色空间中, 把饱和度和亮度拉低, 就能得到比较柔和的背景色了。
// 这儿的 20 / 40 / 35 / 65 都是经验值(随便定的...)
const h = randomInt(0, 360) // 0 - 360
const s = randomInt(20, 40) // 0 - 100
const l = randomInt(35, 65) // 0 - 100
const colorStr = `hsl(${h}deg,${s}%,${l}%)`
但是这时候就有一个问题了, 在该颜色作为背景色时, 前景色应当如何取值, 才能获取最佳的视觉效果呢？
我发现当 hue 值越接近 0 / 120 / 240 / 360 时, 人们(我)会感觉这个颜色较"深"; 而当 hue 值越接近 60 / 180 / 300 时, 人们(我)会感觉这个颜色较"浅";
不知道我的个人感觉是否准确？是否有这方面的理论 /文章？
 |
1
dioxide May 4, 2021
W3C 的 WCAG 规范中有关于文本可识别方面的对比度的描述. 可以参考下.
|
 |
2
xiaoming1992 OP @dioxide 其实我的对比度都是满足要求的
- 比如说当背景色亮度为 0.2 时，前景色亮度为 0.9 则效果较好 - 当背景色亮度为 0.8 时，前景色亮度为 0.1 效果较好 - 我最初很自然地就设定：背景色亮度低于 0.5 时，前景色取 0.9，背景色高于 0.5 时，前景色取 0.1，对于大部分颜色，这样效果很好 - 但对于某些颜色，背景色亮度为 0.5-0.6 时，前景色亮度为 0.9 优于 0.1 ； - 我发现，这一些颜色是有规律的，就是 hue 值接近 60 / 180 / 300 - 我希望能找到相关理论，但是我甚至不知道搜索什么关键词。。。 |
|
3
xiaoming1992 OP 我刚刚看了一下，WCAG 规范还是比较宽松的，规范要求对比度 (L1 + 0.05) / (L2 + 0.05)是 1 - 21，我的 L1 + 0.05 = 0.95 ，L2 + 0.05 范围是 (0.05, 0.5)，所以对比度是 1.9 - 19，完全符合规范。我只是希望找到最优解
|
 |
4
littleMaple May 4, 2021
看看这个 https://github.com/jessuni/SafeColor，简介是“Generate consistent color from a string, or generate a random color from a given color. Both accessible, contrast safe, WCAG success criteria 1.4.3 compliant.”
|
|
5
xiaoming1992 OP @littleMaple 可能和我的目的有一些出入，他是取得**符合规范**的颜色，我是希望取得**最优对比度**的颜色
|
 |
6
billlee May 4, 2021
> 我发现当 hue 值越接近 0 / 120 / 240 / 360 时, 人们(我)会感觉这个颜色较"深"; 而当 hue 值越接近 60 / 180 / 300 时, 人们(我)会感觉这个颜色较"浅"
0/360, 120, 240 是三原色。你说的这个感觉只有在饱和度高的时候才成立, 饱和度低的时候可能中间色感觉更“深”。视觉是个很复杂的模型，就算是三原色的单色光，也会同时刺激三种视锥细胞 |
 |
7
learningman May 4, 2021
还有一个问题，你计算出来的理论颜色可能并不是用户看到的颜色，不同的屏幕调色方向不一致
|
|
8
xiaoming1992 OP 我好像看错了 WCAG 规范，规范说正文对比度最小为 4.5，但是如果这样，当前景色亮度为 1 时，背景色亮度就只能取 0 - 0.22 ，而背景色亮度太低的时候颜色一点都不柔和，这。。。
|
|
9
xiaoming1992 OP @billlee 因为我需要生成比较柔和的颜色，所以饱和度取值范围很低，是 0.2 - 0.4，我正是在低饱和度的时候发现的这一现象啊
|
|
10
xiaoming1992 OP 貌似也不是简单地取对比度最大的。
例如当背景色亮度为 0.4 时，前景色亮度对比度最大的是 0，因为 0.4 + 0.05 / 0 + 0.05 > 1 + 0.05 / 0.4 + 0.05 ，但我测试过大量颜色，此时明显前景色为 1 时更"清晰" |
 |
11
no1xsyzy May 5, 2021
要说的话应当是视觉心理学这块
但没什么研究，有了解的人也非常少。 提一句，黑底白字和白底黑字的视觉效果都是不一样的，你这个问题可能是个单射。 |
 |
12
vanillacloud May 5, 2021 via iPhone
几年前为了一个方便前端阅读长文本的情况，想用简易的「科学方法」来自动配对字色和底色……
后来发现超出了我能力范围——因为有着数值上没问题的颜色，用肉眼一看就觉得有点辣眼睛，觉得里面需要考虑的因素参数太多，可能已经是一篇研究生论文了。 |
|
13
xiaoming1992 OP @vanillacloud 就是这种情况，感觉生成的颜色，都只是勉强能用
|
Select Language