V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
xiaoming1992
V2EX  ›  程序员

是否有理论, 能得到随机的柔和背景色和该背景色下的最佳前景色(文本颜色)?

  •  
  •   xiaoming1992 · 5 天前 · 719 次点击

    我前段时间写了个获取柔和背景色的函数, 就是在 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 时, 人们(我)会感觉这个颜色较"浅";

    更具体的可以查看我的生成函数中的注释内容, 这是示例页面

    不知道我的个人感觉是否准确?是否有这方面的理论 /文章?

    13 条回复    2021-05-05 18:42:17 +08:00
    dioxide
        1
    dioxide   5 天前
    W3C 的 WCAG 规范中有关于文本可识别方面的对比度的描述. 可以参考下.
    xiaoming1992
        2
    xiaoming1992   5 天前
    @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
    - 我希望能找到相关理论,但是我甚至不知道搜索什么关键词。。。
    xiaoming1992
        3
    xiaoming1992   5 天前
    我刚刚看了一下,WCAG 规范还是比较宽松的,规范要求对比度 (L1 + 0.05) / (L2 + 0.05)是 1 - 21,我的 L1 + 0.05 = 0.95 ,L2 + 0.05 范围是 (0.05, 0.5),所以对比度是 1.9 - 19,完全符合规范。我只是希望找到最优解
    littleMaple
        4
    littleMaple   5 天前
    看看这个 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.”
    xiaoming1992
        5
    xiaoming1992   5 天前 via Android
    @littleMaple 可能和我的目的有一些出入,他是取得**符合规范**的颜色,我是希望取得**最优对比度**的颜色
    billlee
        6
    billlee   5 天前
    > 我发现当 hue 值越接近 0 / 120 / 240 / 360 时, 人们(我)会感觉这个颜色较"深"; 而当 hue 值越接近 60 / 180 / 300 时, 人们(我)会感觉这个颜色较"浅"

    0/360, 120, 240 是三原色。你说的这个感觉只有在饱和度高的时候才成立, 饱和度低的时候可能中间色感觉更“深”。视觉是个很复杂的模型,就算是三原色的单色光,也会同时刺激三种视锥细胞
    learningman
        7
    learningman   5 天前
    还有一个问题,你计算出来的理论颜色可能并不是用户看到的颜色,不同的屏幕调色方向不一致
    xiaoming1992
        8
    xiaoming1992   5 天前
    我好像看错了 WCAG 规范,规范说正文对比度最小为 4.5,但是如果这样,当前景色亮度为 1 时,背景色亮度就只能取 0 - 0.22 ,而背景色亮度太低的时候颜色一点都不柔和,这。。。
    xiaoming1992
        9
    xiaoming1992   5 天前
    @billlee 因为我需要生成比较柔和的颜色,所以饱和度取值范围很低,是 0.2 - 0.4,我正是在低饱和度的时候发现的这一现象啊
    xiaoming1992
        10
    xiaoming1992   5 天前
    貌似也不是简单地取对比度最大的。
    例如当背景色亮度为 0.4 时,前景色亮度对比度最大的是 0,因为 0.4 + 0.05 / 0 + 0.05 > 1 + 0.05 / 0.4 + 0.05 ,但我测试过大量颜色,此时明显前景色为 1 时更"清晰"
    no1xsyzy
        11
    no1xsyzy   5 天前
    要说的话应当是视觉心理学这块
    但没什么研究,有了解的人也非常少。

    提一句,黑底白字和白底黑字的视觉效果都是不一样的,你这个问题可能是个单射。
    vanillacloud
        12
    vanillacloud   5 天前 via iPhone
    几年前为了一个方便前端阅读长文本的情况,想用简易的「科学方法」来自动配对字色和底色……

    后来发现超出了我能力范围——因为有着数值上没问题的颜色,用肉眼一看就觉得有点辣眼睛,觉得里面需要考虑的因素参数太多,可能已经是一篇研究生论文了。
    xiaoming1992
        13
    xiaoming1992   4 天前 via Android
    @vanillacloud 就是这种情况,感觉生成的颜色,都只是勉强能用
    关于   ·   帮助文档   ·   FAQ   ·   API   ·   我们的愿景   ·   广告投放   ·   感谢   ·   实用小工具   ·   3513 人在线   最高记录 5497   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 29ms · UTC 07:42 · PVG 15:42 · LAX 00:42 · JFK 03:42
    ♥ Do have faith in what you're doing.