自动改变文字颜色，以确保可读性 [英] Automatically change text color to assure readability

问题描述

FF00FF ， ccaa22 用户可以通过接受RGB十六进制的文本框设置一个按钮的背景颜色>等，所以我需要设置文本颜色相反。不知道的术语（相反的颜色），但这个想法是保证可读性。

解决方案

您可以反转背景颜色，并用它作为前景色。下面的算法产生的结果等同于图像>调整>反相命令颜色在Photoshop：

\r

\r

函数invertColor（hexTripletColor）{\r
    VAR颜色= hexTripletColor;\r
    颜色= color.substring（1）; // 去掉 ＃\r
    颜色= parseInt函数（颜色，16）; //转换为整数\r
    颜色= 0XFFFFFF ^色; //反转三个字节\r
    颜色= color.toString（16）; //转换为十六进制\r
    颜色=（000000+彩色）.slice（-6）; //带前导零垫\r
    颜色=＃+色; // $ P $＃PPEND\r
    返回的颜色;\r
}\r
/ *\r
 *示范\r
 * /\r
功能randomColor（）{\r
    VAR色;\r
    颜色= Math.floor（的Math.random（）* 0x1000000）; // 0x0和0XFFFFFF之间的整数\r
    颜色= color.toString（16）; //转换为十六进制\r
    颜色=（000000+彩色）.slice（-6）; //带前导零垫\r
    颜色=＃+色; // $ P $＃PPEND\r
    返回的颜色;\r
}\r
$（函数（）{\r
    $（。demolist李）。每个（函数（）{\r
        变种C1 = randomColor（）;\r
        变种C2 = invertColor（C1）;\r
        $（本）的.text（C1 ++ C2）的.css（{\r
            色：C1，\r
            背景颜色：C2\r
        }）;\r
    }）;\r
}）;

\r

{体字体：大中加粗等宽; }\r
.demolist {保证金：0;填充：0;列表样式类型：无;溢出：隐藏; }\r
.demolist李{浮动：左;宽度：5em的;高度：5em的;文本对齐：中心; }

\r

＆LT; UL类=demolist＆GT;\r
    ＆LT;立GT;＆LT; /李＆GT;\r
    ＆LT;立GT;＆LT; /李＆GT;\r
    ＆LT;立GT;＆LT; /李＆GT;\r
    ＆LT;立GT;＆LT; /李＆GT;\r
    ＆LT;立GT;＆LT; /李＆GT;\r
    ＆LT;立GT;＆LT; /李＆GT;\r
    ＆LT;立GT;＆LT; /李＆GT;\r
    ＆LT;立GT;＆LT; /李＆GT;\r
    ＆LT;立GT;＆LT; /李＆GT;\r
    ＆LT;立GT;＆LT; /李＆GT;\r
    ＆LT;立GT;＆LT; /李＆GT;\r
    ＆LT;立GT;＆LT; /李＆GT;\r
    ＆LT;立GT;＆LT; /李＆GT;\r
    ＆LT;立GT;＆LT; /李＆GT;\r
    ＆LT;立GT;＆LT; /李＆GT;\r
    ＆LT;立GT;＆LT; /李＆GT;\r
    ＆LT;立GT;＆LT; /李＆GT;\r
    ＆LT;立GT;＆LT; /李＆GT;\r
    ＆LT;立GT;＆LT; /李＆GT;\r
    ＆LT;立GT;＆LT; /李＆GT;\r
    ＆LT;立GT;＆LT; /李＆GT;\r
    ＆LT;立GT;＆LT; /李＆GT;\r
    ＆LT;立GT;＆LT; /李＆GT;\r
    ＆LT;立GT;＆LT; /李＆GT;\r
＆LT; / UL＆GT;\r
＆LT;脚本src=\"https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js\"></script>\r


\r


\r

请注意，这不是一个防弹溶液。颜色是接近50％的亮度和/或饱和度不会产生足够的对比度。

上的jsfiddle 演示

Users can set the background-color of a button through a textbox that accept RGB hexadecimal notation: ff00ff, ccaa22, etc. So I need to set the text color to the opposite. Not sure about the terminology (opposite color) but the idea is assure readability.

解决方案

You can invert the background color and use it as foreground color. The following algorithm produces results identical to the "Image > Adjustments > Invert" color command in Photoshop:

function invertColor(hexTripletColor) {
    var color = hexTripletColor;
    color = color.substring(1);           // remove #
    color = parseInt(color, 16);          // convert to integer
    color = 0xFFFFFF ^ color;             // invert three bytes
    color = color.toString(16);           // convert to hex
    color = ("000000" + color).slice(-6); // pad with leading zeros
    color = "#" + color;                  // prepend #
    return color;
}
/*
 * Demonstration
 */
function randomColor() {
    var color;
    color = Math.floor(Math.random() * 0x1000000); // integer between 0x0 and 0xFFFFFF
    color = color.toString(16);                    // convert to hex
    color = ("000000" + color).slice(-6);          // pad with leading zeros
    color = "#" + color;                           // prepend #
    return color;
}
$(function() {
    $(".demolist li").each(function() {
        var c1 = randomColor();
        var c2 = invertColor(c1);
        $(this).text(c1 + " " + c2).css({
            "color": c1,
            "background-color": c2
        });
    });
});

body { font: bold medium monospace; }
.demolist { margin: 0; padding: 0; list-style-type: none; overflow: hidden; }
.demolist li { float: left; width: 5em; height: 5em; text-align: center; }

<ul class="demolist">
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
</ul>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>

Note that this is not a bullet-proof solution. Colors that are close to 50% brightness and/or saturation will not produce sufficient contrast.

Demo on jsFiddle

这篇关于自动改变文字颜色，以确保可读性的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！