JavaScript檢查顏色衝突

注意：本文非原創，而是翻譯國外大師文章，布賴恩蘇達。布賴恩蘇達是一位信息大師，天天都在努力使網絡變得更加美好。自從90年代中期發現互聯網以來，Brian Suda已經花了不少時間與之相關聯。他本身的一小部分互聯網是 http://suda.co.uk，他的許多過去的項目和瘋狂的想法均可以找到。

原文題目是：計算顏色對比度，可是我想業餘的說法比較通俗易懂，也方便搜索引擎收錄。

廢話少說，進入正題。

---

問題出現的背景

某些網站和服務容許您經過上傳圖片，更改背景顏色或設計的其餘方面來自定義您的我的資料。做爲客戶，此個性化將Web應用程序轉換爲您存儲數據的小窩。做爲設計師，讓您的客戶自由地控制佈局和設計是一個可怕的前景。那麼設計用於漂亮的白色背景的全部股票文本和圖像會發生什麼？即使是Mac也只容許您選擇OS，藍色或石墨兩種顏色！除非您靈活並瞭解如何找到最大色彩對比，不然開放自定義網站配色方案的能力可能會致使災難。

在本文中，我將向您介紹兩個簡單的公式，以肯定您是否應該使用白色或黑色文本，具體取決於背景的顏色。方程式易於實現併產生相似的結果。這不是一個更好的問題，而是你使用一個更好的事實！這樣，即便您的客戶選擇了最瘋狂的Geocities配色方案，至少您的文本仍然可讀。

讓咱們來看看各類可能的顏色。也許這些是預先製做的配色方案，公司顏色或從圖像中提取。

如今咱們有了這些潛在的背景顏色及其十六進制值，咱們須要找出相應的文本是白色仍是黑色，基於哪一個具備更高的對比度，所以提供最佳的可讀性。這能夠在運行時使用JavaScript完成，也能夠在HTML服務以前在後端完成。

我想要比較兩個函數。首先，我稱之爲「50％」。它取十六進制值並將其與純黑色和純白色之間的值進行比較。若是十六進制值小於一半，意味着它位於光譜的較暗側，則返回白色做爲文本顏色。若是結果大於一半，則它位於光譜較輕的一側，並返回黑色做爲文本值。

在PHP中：

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

在JavaScript中：

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

它沒有那麼簡單！該函數將六字符十六進制顏色轉換爲整數，並將其與純白色的整數值的一半進行比較。該功能易於記憶，但在理解咱們如何感知頻譜的某些部分時卻很幼稚。不一樣的波長對對比度有更大或更小的影響。

第二個等式稱爲' YIQ '，由於它將RGB顏色空間轉換爲YIQ，這考慮了其組成部分的不一樣影響。一樣，等式返回白色或黑色，而且它也很容易實現。

在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';
}

您首先會注意到咱們已將十六進制值分解爲單獨的RGB值。這很重要，由於這些通道中的每個都根據其視覺影響進行縮放。一旦全部內容都被縮放和標準化，它將在0到255之間的範圍內。就像以前的「50％」函數同樣，咱們如今須要檢查輸入是在中途仍是在中途。根據該值的位置，咱們將返回相應的最高對比色。

就是這樣：兩個簡單的對比度方程式，能夠很好地肯定最佳可讀性。

若是您有興趣瞭解更多，W3C有一些關於顏色對比的文檔，以及如何肯定任何兩種顏色之間是否有足夠的對比度。這對於可訪問性很是重要，以確保文本和連接顏色與背景之間有足夠的對比度。

Kevin Hale在Particletree上也有一篇很棒的文章，講述了他選擇光明或黑暗主題的經歷。爲了完善它，Jonathan Snook建立了一個顏色對比度選擇器，容許您使用RGB滑塊來獲取YIQ，對比度和其餘值。這樣你就能夠快速擺弄旋鈕，找到合適的平衡點。

比較結果

讓咱們重溫一下咱們的顏色方案，看看基於這兩個方程推薦哪一種文本顏色能夠得到最大對比度。

若是咱們使用簡單的'50％'對比度函數，咱們能夠看到它建議黑色除了第二行上的深綠色和紫色以外的全部顏色。通常來講，等式感受顏色很淺，黑色是文本的更好選擇。

更復雜的' YIQ '功能，加權顏色，建議略有不一樣。對於很是暗的顏色，仍然建議使用白色文字，但有一些驚喜。紅色和粉紅色值顯示白色文本而不是黑色。該等式考慮了紅色值的權重，並肯定色調足夠暗以使白色文本顯示最大對比度。

如您所見，兩種對比度算法在大多數狀況下都是一致的。在某些狀況下，它們會發生衝突，但總的來講，您可使用您喜歡的等式。我不認爲這是一個主要問題，若是一些邊緣狀況顏色與另外一種顏色造成對比，它們仍然很是易讀。

如今讓咱們看一些常見的顏色，而後看看這兩個函數如何比較。您能夠很快發現它們在整個範圍內都作得很是好。

在前幾種灰色陰影中，白色和黑色的對比是有意義的，可是當咱們測試光譜中的其餘顏色時，咱們確實會出現意想不到的誤差。純紅色#FF0000有一個觸發器。這是因爲' YIQ '功能如何對RGB部分進行加權。雖然你可能我的喜歡一種風格而不是另外一種風格，但二者都是合理的。

在第二輪的顏色中，咱們更深刻地瞭解光譜，走出人跡罕至的軌道。一樣，大多數狀況下，對比算法是同步的，但每隔一段時間他們就不一樣意了。您能夠選擇本身喜歡的內容，但二者都不可讀。

結論

顏色對比很重要，特別是若是你放棄全部控制並採起不干涉的設計方法。經過使顏色之間的對比度儘量高來選擇智能默認值很是重要。這使您的客戶更容易閱讀，增長可訪問性，一般只是更容易看到。

固然，還有不少其餘的方程來肯定對比度; 最重要的是你選擇一個並將其實施到你的系統中。

因此，繼續在你的設計中試驗顏色。您如今知道保證您的文本在任何狀況下都是最易讀的是多麼容易。

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