随机背景色和前景色搭配问题 转自《马黑博客》

admin

背景色和前景色如果都随机获取，怎么做才能得到较为理想的效果，需要考虑的因素很多。其中，对比度是首要考虑的问题，这是解决文本辨析度的关键；其次，提升阅读舒适性，至少在视觉上基本符合 WCAG（网络内容无障碍指南）提出的标准。以下演示基于上述两个因素实现，具体思路是：使用 HSL颜色模型 获取配套的随机深色背景+浅色前景或浅色前景+深色背景，其中：深色背景和浅色背景固定饱和度、亮度分别为 20%、90%，深色前景和浅色前景饱和度分别为30%、80%，亮度依次为90%、20%，代码如下，在线预览效果时可单击元素变换背景色和前景色：

<style>

        #mydiv {

                margin: 20px auto;

                width: 800px;

                height: 300px;

                border: 1px solid gray;

                display: grid;

                place-items: center;

                font-size: 5em;

        }

</style>

<div id="mydiv">Hello CSS!</div>

<script>

        const setBgAndColor = (elm) => {

                const hue = Math.floor(Math.random() * 360);

                const isDarkBg = Math.random() > 0.5; // 随机深、浅色背景

                const bg = isDarkBg

                        ? `hsl(${hue}, 100%, 20%)`  // 深色背景

                        : `hsl(${hue}, 100%, 90%)`; // 浅色背景

                const color = isDarkBg

                        ? `hsl(${hue}, 30%, 90%)`   // 浅色前景

                        : `hsl(${hue}, 80%, 20%)`;  // 深色前景

                elm.style.backgroundColor = bg; // 背景色

                elm.style.color = color; // 前景色

        };

        setBgAndColor(mydiv); // 页面打开时上色

        mydiv.onclick = () => setBgAndColor(mydiv); // 单击元素变换颜色

</script>

以上只是一个粗糙的方案，灵感来自于和一位做平面设计的朋友的一场谈话


《马黑博客》地址:  https://mahei.ccccocccc.cc/?i=1