摘要：也許這些是預(yù)先制作的配色方案，公司顏色或從圖像中提取。第二個(gè)等式稱(chēng)為，因?yàn)樗鼘㈩伾臻g轉(zhuǎn)換為，這考慮了其組成部分的不同影響。根據(jù)該值的位置，我們將返回相應(yīng)的最高對(duì)比色。紅色和粉紅色值顯示白色文本而不是黑色。

注意：本文非原創(chuàng)，而是翻譯國(guó)外大師文章，布賴(lài)恩蘇達(dá)。布賴(lài)恩蘇達(dá)是一位信息大師，每天都在努力使網(wǎng)絡(luò)變得更加美好。自從90年代中期發(fā)現(xiàn)互聯(lián)網(wǎng)以來(lái)，Brian Suda已經(jīng)花了很多時(shí)間與之相關(guān)聯(lián)。他自己的一小部分互聯(lián)網(wǎng)是http://suda.co.uk，他的許多過(guò)去的項(xiàng)目和瘋狂的想法都可以找到。

原文題目是：計(jì)算顏色對(duì)比度，但是我想業(yè)余的說(shuō)法比較通俗易懂，也方便搜索引擎收錄。

廢話(huà)少說(shuō)，進(jìn)入正題。

某些網(wǎng)站和服務(wù)允許您通過(guò)上傳圖片，更改背景顏色或設(shè)計(jì)的其他方面來(lái)自定義您的個(gè)人資料。作為客戶(hù)，此個(gè)性化將Web應(yīng)用程序轉(zhuǎn)換為您存儲(chǔ)數(shù)據(jù)的小窩。作為設(shè)計(jì)師，讓您的客戶(hù)自由地控制布局和設(shè)計(jì)是一個(gè)可怕的前景。那么設(shè)計(jì)用于漂亮的白色背景的所有股票文本和圖像會(huì)發(fā)生什么？即便是Mac也只允許您選擇OS，藍(lán)色或石墨兩種顏色！除非您靈活并了解如何找到最大色彩對(duì)比，否則開(kāi)放自定義網(wǎng)站配色方案的能力可能會(huì)導(dǎo)致災(zāi)難。

在本文中，我將向您介紹兩個(gè)簡(jiǎn)單的公式，以確定您是否應(yīng)該使用白色或黑色文本，具體取決于背景的顏色。方程式易于實(shí)現(xiàn)并產(chǎn)生類(lèi)似的結(jié)果。這不是一個(gè)更好的問(wèn)題，而是你使用一個(gè)更好的事實(shí)！這樣，即使您的客戶(hù)選擇了最瘋狂的Geocities配色方案，至少您的文本仍然可讀。

讓我們來(lái)看看各種可能的顏色。也許這些是預(yù)先制作的配色方案，公司顏色或從圖像中提取。

現(xiàn)在我們有了這些潛在的背景顏色及其十六進(jìn)制值，我們需要找出相應(yīng)的文本是白色還是黑色，基于哪個(gè)具有更高的對(duì)比度，因此提供最佳的可讀性。這可以在運(yùn)行時(shí)使用JavaScript完成，也可以在HTML服務(wù)之前在后端完成。

我想要比較兩個(gè)函數(shù)。首先，我稱(chēng)之為“50％”。它取十六進(jìn)制值并將其與純黑色和純白色之間的值進(jìn)行比較。如果十六進(jìn)制值小于一半，意味著它位于光譜的較暗側(cè)，則返回白色作為文本顏色。如果結(jié)果大于一半，則它位于光譜較輕的一側(cè)，并返回黑色作為文本值。

在PHP中：

function getContrast50($hexcolor){
    return (hexdec($hexcolor) > 0xffffff/2) ? "black":"white";
}

在JavaScript中：

function getContrast50(hexcolor){
    return (parseInt(hexcolor, 16) > 0xffffff/2) ? "black":"white";
}

它沒(méi)有那么簡(jiǎn)單！該函數(shù)將六字符十六進(jìn)制顏色轉(zhuǎn)換為整數(shù)，并將其與純白色的整數(shù)值的一半進(jìn)行比較。該功能易于記憶，但在理解我們?nèi)绾胃兄l譜的某些部分時(shí)卻很幼稚。不同的波長(zhǎng)對(duì)對(duì)比度有更大或更小的影響。

第二個(gè)等式稱(chēng)為" YIQ "，因?yàn)樗鼘GB顏色空間轉(zhuǎn)換為YIQ，這考慮了其組成部分的不同影響。同樣，等式返回白色或黑色，并且它也很容易實(shí)現(xiàn)。

在PHP中：

function getContrastYIQ($hexcolor){
    $r = hexdec(substr($hexcolor,0,2));
    $g = hexdec(substr($hexcolor,2,2));
    $b = hexdec(substr($hexcolor,4,2));
    $yiq = (($r*299)+($g*587)+($b*114))/1000;
    return ($yiq >= 128) ? "black" : "white";
}

在JavaScript中：

function getContrastYIQ(hexcolor){
    var r = parseInt(hexcolor.substr(0,2),16);
    var g = parseInt(hexcolor.substr(2,2),16);
    var b = parseInt(hexcolor.substr(4,2),16);
    var yiq = ((r*299)+(g*587)+(b*114))/1000;
    return (yiq >= 128) ? "black" : "white";
}

您首先會(huì)注意到我們已將十六進(jìn)制值分解為多帶帶的RGB值。這很重要，因?yàn)檫@些通道中的每一個(gè)都根據(jù)其視覺(jué)影響進(jìn)行縮放。一旦所有內(nèi)容都被縮放和標(biāo)準(zhǔn)化，它將在0到255之間的范圍內(nèi)。就像之前的“50％”函數(shù)一樣，我們現(xiàn)在需要檢查輸入是在中途還是在中途。根據(jù)該值的位置，我們將返回相應(yīng)的最高對(duì)比色。

就是這樣：兩個(gè)簡(jiǎn)單的對(duì)比度方程式，可以很好地確定最佳可讀性。

如果您有興趣了解更多，W3C有一些關(guān)于顏色對(duì)比的文檔，以及如何確定任何兩種顏色之間是否有足夠的對(duì)比度。這對(duì)于可訪問(wèn)性非常重要，以確保文本和鏈接顏色與背景之間有足夠的對(duì)比度。

Kevin Hale在Particletree上也有一篇很棒的文章，講述了他選擇光明或黑暗主題的經(jīng)歷。為了完善它，Jonathan Snook創(chuàng)建了一個(gè)顏色對(duì)比度選擇器，允許您使用RGB滑塊來(lái)獲取YIQ，對(duì)比度和其他值。這樣你就可以快速擺弄旋鈕，找到合適的平衡點(diǎn)。

讓我們重溫一下我們的顏色方案，看看基于這兩個(gè)方程推薦哪種文本顏色可以獲得最大對(duì)比度。

如果我們使用簡(jiǎn)單的"50％"對(duì)比度函數(shù)，我們可以看到它建議黑色除了第二行上的深綠色和紫色之外的所有顏色。一般來(lái)說(shuō)，等式感覺(jué)顏色很淺，黑色是文本的更好選擇。

更復(fù)雜的" YIQ "功能，加權(quán)顏色，建議略有不同。對(duì)于非常暗的顏色，仍然建議使用白色文字，但有一些驚喜。紅色和粉紅色值顯示白色文本而不是黑色。該等式考慮了紅色值的權(quán)重，并確定色調(diào)足夠暗以使白色文本顯示最大對(duì)比度。

如您所見(jiàn)，兩種對(duì)比度算法在大多數(shù)情況下都是一致的。在某些情況下，它們會(huì)發(fā)生沖突，但總的來(lái)說(shuō)，您可以使用您喜歡的等式。我不認(rèn)為這是一個(gè)主要問(wèn)題，如果一些邊緣情況顏色與另一種顏色形成對(duì)比，它們?nèi)匀环浅Ｒ鬃x。

現(xiàn)在讓我們看一些常見(jiàn)的顏色，然后看看這兩個(gè)函數(shù)如何比較。您可以很快發(fā)現(xiàn)它們?cè)谡麄€(gè)范圍內(nèi)都做得非常好。

在前幾種灰色陰影中，白色和黑色的對(duì)比是有意義的，但是當(dāng)我們測(cè)試光譜中的其他顏色時(shí)，我們確實(shí)會(huì)出現(xiàn)意想不到的偏差。純紅色#FF0000有一個(gè)觸發(fā)器。這是由于" YIQ "功能如何對(duì)RGB部分進(jìn)行加權(quán)。雖然你可能個(gè)人喜歡一種風(fēng)格而不是另一種風(fēng)格，但兩者都是合理的。

在第二輪的顏色中，我們更深入地了解光譜，走出人跡罕至的軌道。同樣，大多數(shù)情況下，對(duì)比算法是同步的，但每隔一段時(shí)間他們就不同意了。您可以選擇自己喜歡的內(nèi)容，但兩者都不可讀。

顏色對(duì)比很重要，特別是如果你放棄所有控制并采取不干涉的設(shè)計(jì)方法。通過(guò)使顏色之間的對(duì)比度盡可能高來(lái)選擇智能默認(rèn)值非常重要。這使您的客戶(hù)更容易閱讀，增加可訪問(wèn)性，通常只是更容易看到。

當(dāng)然，還有很多其他的方程來(lái)確定對(duì)比度; 最重要的是你選擇一個(gè)并將其實(shí)施到你的系統(tǒng)中。

所以，繼續(xù)在你的設(shè)計(jì)中試驗(yàn)顏色。您現(xiàn)在知道保證您的文本在任何情況下都是最易讀的是多么容易。

原文鏈接：https://24ways.org/2010/calcu...