JavaScript檢查顏色沖突

littlelightss 發布于2019-08-23 17:00 / 2000人閱讀

摘要：也許這些是預先制作的配色方案，公司顏色或從圖像中提取。第二個等式稱為，因為它將顏色空間轉換為，這考慮了其組成部分的不同影響。根據該值的位置，我們將返回相應的最高對比色。紅色和粉紅色值顯示白色文本而不是黑色。

注意：本文非原創，而是翻譯國外大師文章，布賴恩蘇達。布賴恩蘇達是一位信息大師，每天都在努力使網絡變得更加美好。自從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...

GPU云服務器云服務器事件沖突事務沖突總線沖突包沖突

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/103656.html

Sublime Text3配置使用教程整理

摘要：安裝完添加如下配置可自動在保存文件的時候格式化中文輸入法不能跟隨光標嗎試試這個插件吧目前只支持和裝完之后，寫作時右下角顯示語法為，可以按，直接就會生成，并在瀏覽器中顯示。 Win平臺上已經打造了便攜版的Sublime Text3,但是，現在折騰Ubuntu不能同步過來使用了，寒假在家休息，整理一下安裝過程好了：安裝sublime 在sublime text官網選擇合適的版本安裝。 u...

Martin91 2019-08-19 17:38 評論0 收藏0
Sublime Text3配置使用教程整理

摘要：安裝完添加如下配置可自動在保存文件的時候格式化中文輸入法不能跟隨光標嗎試試這個插件吧目前只支持和裝完之后，寫作時右下角顯示語法為，可以按，直接就會生成，并在瀏覽器中顯示。 Win平臺上已經打造了便攜版的Sublime Text3,但是，現在折騰Ubuntu不能同步過來使用了，寒假在家休息，整理一下安裝過程好了：安裝sublime 在sublime text官網選擇合適的版本安裝。 u...

kevin 2019-08-30 12:46 評論0 收藏0
Sublime Text3配置使用教程整理

摘要：安裝完添加如下配置可自動在保存文件的時候格式化中文輸入法不能跟隨光標嗎試試這個插件吧目前只支持和裝完之后，寫作時右下角顯示語法為，可以按，直接就會生成，并在瀏覽器中顯示。 Win平臺上已經打造了便攜版的Sublime Text3,但是，現在折騰Ubuntu不能同步過來使用了，寒假在家休息，整理一下安裝過程好了：安裝sublime 在sublime text官網選擇合適的版本安裝。 u...

jsdt 2019-08-01 15:03 評論0 收藏0
Sublime Text3配置使用教程整理

摘要：安裝完添加如下配置可自動在保存文件的時候格式化中文輸入法不能跟隨光標嗎試試這個插件吧目前只支持和裝完之后，寫作時右下角顯示語法為，可以按，直接就會生成，并在瀏覽器中顯示。 Win平臺上已經打造了便攜版的Sublime Text3,但是，現在折騰Ubuntu不能同步過來使用了，寒假在家休息，整理一下安裝過程好了：安裝sublime 在sublime text官網選擇合適的版本安裝。 u...

wuyangchun 2019-07-24 18:29 評論0 收藏0