马黑黑 发表于 2025-12-6 12:44

随机背景色和前景色搭配问题

<style>
        .artBox { font-size: 18px; margin: 20px auto; max-width: 1200px; }
        .artBox > p { margin: 10px 0; line-height: 30px; }
        .artBox mark { padding: 4px 6px; background: lightblue; }
</style>

<div class="artBox">
        <p>背景色和前景色如果都随机获取，怎么做才能得到较为理想的效果，需要考虑的因素很多。其中，对比度是首要考虑的问题，这是解决文本辨析度的关键；其次，提升阅读舒适性，至少在视觉上基本符合 WCAG（网络内容无障碍指南）提出的标准。以下演示基于上述两个因素实现，具体思路是：使用 HSL颜色模型 获取配套的随机<txt-red>深色背景+浅色前景</txt-red>或<txt-red>浅色前景+深色背景</txt-red>，其中：深色背景和浅色背景固定饱和度、亮度分别为 20%、90%，深色前景和浅色前景饱和度分别为30%、80%，亮度依次为90%、20%，代码如下，在线预览效果时可单击元素变换背景色和前景色：</p>
        <div class="codebox" data-prev="1">
&lt;style&gt;
        #mydiv {
                margin: 20px auto;
                width: 800px;
                height: 300px;
                border: 1px solid gray;
                display: grid;
                place-items: center;
                font-size: 5em;
        }
&lt;/style&gt;

&lt;div id="mydiv"&gt;Hello CSS!&lt;/div&gt;

&lt;script&gt;
        const setBgAndColor = (elm) =&gt; {
                const hue = Math.floor(Math.random() * 360);
                const isDarkBg = Math.random() &gt; 0.5; <txt-green>// 随机深、浅色背景</txt-green>
   
                const bg = isDarkBg
                        ? `hsl(${hue}, 100%, 20%)`<txt-green>// 深色背景</txt-green>
                        : `hsl(${hue}, 100%, 90%)`; <txt-green>// 浅色背景</txt-green>
      
                const color = isDarkBg
                        ? `hsl(${hue}, 30%, 90%)`   <txt-green>// 浅色前景</txt-green>
                        : `hsl(${hue}, 80%, 20%)`;<txt-green>// 深色前景</txt-green>
   
                elm.style.backgroundColor = bg; <txt-green>// 背景色</txt-green>
                elm.style.color = color; <txt-green>// 前景色</txt-green>
        };
       
        setBgAndColor(mydiv); <txt-green>// 页面打开时上色</txt-green>
       
        mydiv.onclick = () =&gt; setBgAndColor(mydiv); <txt-green>// 单击元素变换颜色</txt-green>
&lt;/script&gt;
        </div>
        <p>以上只是一个粗糙的方案，灵感来自于和一位做平面设计的朋友的一场谈话。</p>
</div>

<script type="module">
        import linenumber from 'https://638183.freep.cn/638183/web/js/linenumber.js';
        linenumber();
</script>

马黑黑 发表于 2025-12-6 12:55

此方案可能解决了辨析度和友好性问题，阅读舒适度则是一个需要更为精细处理的事情，它涉及的层面太复杂，随即获取颜色的话难以一一规划、达成。

霜染枫丹 发表于 2025-12-6 19:07

我留存了。颜色是我在做视频时经常被困扰的，对想要的效果很难做到准确，基本是靠着测试，标准就是我看着能接受。对看着不喜欢的也只能是我感觉不好看。感谢马老师发无偿分享！祝您冬安~~{:4_204:}{:4_190:}

马黑黑 发表于 2025-12-6 19:08

霜染枫丹 发表于 2025-12-6 19:07
我留存了。颜色是我在做视频时经常被困扰的，对想要的效果很难做到准确，基本是靠着测试，标准就是我看着能 ...

色彩学是一门恢弘庞大的学问，这里只是实现了极低的功能

霜染枫丹 发表于 2025-12-6 19:12

马黑黑 发表于 2025-12-6 19:08
色彩学是一门恢弘庞大的学问，这里只是实现了极低的功能

在FLASH时代，有一个配色演示的flash模板我经常用。想着可以应用时确实很不理想的效果让我很无奈。就这就足够给我带来天花板级别的方便了。

红影 发表于 2025-12-6 19:20

马黑黑 发表于 2025-12-6 12:55
此方案可能解决了辨析度和友好性问题，阅读舒适度则是一个需要更为精细处理的事情，它涉及的层面太复杂，随 ...

去预览了，这个的颜色随机配置的前景与背景的对比，已经是阅读舒适区里的了，无论怎样点击，文字和背景一直保持着设定想到达到的预期{:4_187:}

红影 发表于 2025-12-6 19:25

还能这样设置，厉害了。如果代码不熟，就算想到解决方案，也无法实现呢{:4_187:}

马黑黑 发表于 2025-12-6 19:33

红影 发表于 2025-12-6 19:25
还能这样设置，厉害了。如果代码不熟，就算想到解决方案，也无法实现呢

想到了就能解决

马黑黑 发表于 2025-12-6 19:34

红影 发表于 2025-12-6 19:20
去预览了，这个的颜色随机配置的前景与背景的对比，已经是阅读舒适区里的了，无论怎样点击，文字和背景一 ...

但离色彩学推荐的配色方案还相差甚远

马黑黑 发表于 2025-12-6 19:37

霜染枫丹 发表于 2025-12-6 19:12
在FLASH时代，有一个配色演示的flash模板我经常用。想着可以应用时确实很不理想的效果让我很无奈。就这就 ...

Flash很遗憾的，不能坚持下来。它的问题仅是：安全问题没有能解决，漏洞太多，容易引来攻击。苹果的前董事长乔老爷乔布斯在世的时候就提醒和警告说，若Flash不能解决安全问题，苹果系统将抛弃Flash。他们没有用心解决安全问题，终被抛弃，可惜了

霜染枫丹 发表于 2025-12-6 19:42

马黑黑 发表于 2025-12-6 19:37
Flash很遗憾的，不能坚持下来。它的问题仅是：安全问题没有能解决，漏洞太多，容易引来攻击。苹果的前董 ...

我很喜欢FLASH在制作上的发挥空间，可以把很多想法具象化，现在会声会影虽然也有类似flash的功能，在发挥空间还是不如FLASH那样的自由度。

杨帆 发表于 2025-12-6 20:11

马黑黑 发表于 2025-12-6 19:33
想到了就能解决

马老师太厉害了~想到就能实现！如果可显示色彩搭配方案的色彩代码对就更完美了{:4_180:}

马黑黑 发表于 2025-12-6 21:01

杨帆 发表于 2025-12-6 20:11
马老师太厉害了~想到就能实现！如果可显示色彩搭配方案的色彩代码对就更完美了

前面说过，这是一个很复杂的工程
页: [1]
查看完整版本: 随机背景色和前景色搭配问题