提升網(wǎng)站和應(yīng)用的輔助功能，最簡(jiǎn)單的方法之一就是確保所用顏色賞心悅目。高對(duì)比度顏色對(duì)所有人都有益，不僅能減少一般的眼睛疲勞，對(duì)視力受損的用戶也至關(guān)重要。

讓我們不僅在設(shè)計(jì)中使用更好的顏色組合，還要找到一種更簡(jiǎn)便的方法來實(shí)現(xiàn)高對(duì)比度。Oomph 公司采用了一種特定的策略，讓 Sass 函數(shù)完成所有繁重的工作。我將逐步向您介紹我們是如何實(shí)現(xiàn)這一點(diǎn)的。

如果您已經(jīng)了解顏色輔助功能的所有知識(shí)，并想直接跳到代碼部分，請(qǐng)點(diǎn)擊此處。

“輔助功能顏色組合”的含義

顏色對(duì)比度也是我們可能認(rèn)為已經(jīng)處理好的事情之一。但是，高顏色對(duì)比度不僅僅是憑感覺判斷設(shè)計(jì)。WCAG 定義了不同的可接受標(biāo)準(zhǔn)級(jí)別，這些級(jí)別被認(rèn)為是可訪問的。打開 WebAIM 對(duì)比度檢查器，運(yùn)行網(wǎng)站的顏色組合，這實(shí)際上會(huì)讓人謙卑。

我的團(tuán)隊(duì)默認(rèn)遵守 WCAG 的 AA 級(jí)指南。這意味著：

• 大于等于 24 像素的文本，或者如果加粗則大于等于 19 像素的文本，其顏色對(duì)比度比 (CCR) 應(yīng)為 3.0:1。
• 小于 24 像素的文本的 CCR 應(yīng)為 4.5:1。

如果網(wǎng)站需要遵守 AA 級(jí)增強(qiáng)的指南，要求會(huì)更高一些：

• 大于等于 24 像素的文本，或者如果加粗則大于等于 19 像素的文本，其顏色對(duì)比度比 (CCR) 應(yīng)為 4.5:1。
• 小于 24 像素的文本的 CCR 應(yīng)為 7:1。

比率？ 嗯？是的，這里涉及一些數(shù)學(xué)運(yùn)算。但好消息是，我們不需要自己動(dòng)手計(jì)算，也不需要像 Stacie Arellano 最近分享的那樣對(duì)計(jì)算方法有深入的了解（如果您對(duì)顏色輔助功能的科學(xué)原理感興趣，這篇文章是必讀的）。

這就是 Sass 的用武之地。我們可以利用它來運(yùn)行復(fù)雜的數(shù)學(xué)計(jì)算，否則這些計(jì)算會(huì)讓我們難以理解。但首先，我認(rèn)為值得在設(shè)計(jì)層面處理輔助功能顏色。

輔助功能調(diào)色板始于設(shè)計(jì)

沒錯(cuò)。創(chuàng)建輔助功能調(diào)色板的核心工作始于設(shè)計(jì)。理想情況下，任何網(wǎng)頁設(shè)計(jì)都應(yīng)該參考工具來驗(yàn)證任何使用的顏色組合是否通過既定指南，然后調(diào)整未通過的色彩。我們的設(shè)計(jì)團(tuán)隊(duì)在執(zhí)行此操作時(shí)，使用我們內(nèi)部開發(fā)的工具。它處理顏色列表，在深色和淺色上測(cè)試它們，并提供測(cè)試其他組合的方法。

這是我們團(tuán)隊(duì)首先要做的事情。我敢說，許多品牌顏色在選擇時(shí)并沒有將輔助功能放在首位。我經(jīng)常發(fā)現(xiàn)，這些顏色在轉(zhuǎn)換為網(wǎng)頁設(shè)計(jì)時(shí)需要更改。通過教育、對(duì)話和視覺樣本，我們讓客戶批準(zhǔn)新的調(diào)色板。我承認(rèn)：這部分工作可能比實(shí)際實(shí)施輔助功能顏色組合更難。

我想通過自動(dòng)化解決的問題是極端情況。您不能責(zé)怪設(shè)計(jì)師遺漏了一些顏色以意外方式組合的情況——這種情況確實(shí)會(huì)發(fā)生。而這些極端情況將會(huì)出現(xiàn)，無論是在構(gòu)建過程中還是一年后添加新顏色到系統(tǒng)中時(shí)。

在保持顏色系統(tǒng)意圖的同時(shí)開發(fā)輔助功能

將顏色更改為滿足輔助功能要求的技巧在于，不要過多地更改顏色，以至于它們看起來不再是相同的顏色。一個(gè)喜歡其翡翠綠顏色的品牌會(huì)希望保持該顏色的意圖——它的“翡翠感”。為了使其在用作白色背景上的文本時(shí)通過輔助功能測(cè)試，我們可能需要加深綠色并增加其飽和度。但我們?nèi)匀幌Ｍ伾c原始顏色“相同”。

為此，我們使用色相飽和度亮度 (HSL) 顏色模型。HSL 使我們能夠保持色相不變，但調(diào)整飽和度（即增加或減少顏色）和亮度（即添加更多黑色或更多白色）。色相使綠色成為那種綠色，或使藍(lán)色成為那種藍(lán)色。它是顏色的“靈魂”，讓我們對(duì)此稍作神秘化。

色相表示為色輪，其值為 0° 到 360°——黃色為 60°，綠色為 120°，青色為 180°，等等。飽和度是一個(gè)百分比，范圍從 0%（無飽和度）到 100%（完全飽和度）。亮度也是一個(gè)值，范圍從 0% 到 100%，其中 0% 是無亮度，50% 是無黑和白，100% 是全部亮度，或非常亮。

在我們的工具中調(diào)整顏色的快速視覺效果：

要了解更多信息，請(qǐng)?jiān)?mothereffinghsl.com 上試用有趣的 HSL 可視化工具。但是，對(duì)于更深入的色盲描述、WCAG 顏色對(duì)比度級(jí)別和 HSL 顏色空間，我們撰寫了一篇深入的博文。

我想要解決的用例

設(shè)計(jì)師可以使用我們剛剛回顧過的工具來調(diào)整顏色，但是到目前為止，我還沒有發(fā)現(xiàn)任何 Sass 可以用神奇的數(shù)學(xué)方法做到這一點(diǎn)。一定有辦法。

以下是我在實(shí)際應(yīng)用中看到的一些類似方法：

• Josh Bader 的一個(gè)想法是使用 CSS 變量并將顏色拆分為其 RGB 值，以計(jì)算在給定情況下白色或黑色是最佳輔助功能顏色。
• Facundo Corradini 的另一個(gè)想法與 HSL 值和 CSS 中非?？岬摹伴_關(guān)函數(shù)”類似。

我不喜歡這些方法。我不想回退到白色或黑色。我希望顏色保持不變，但要調(diào)整為可訪問。此外，將顏色更改為其 RGB 或 HSL 分量并將其與 CSS 變量一起存儲(chǔ)似乎很混亂且難以維護(hù)大型代碼庫。

我想使用像 Sass 這樣的預(yù)處理器來做到這一點(diǎn)：給定兩種顏色，自動(dòng)調(diào)整其中一種顏色，以便該對(duì)顏色獲得通過 WCAG 等級(jí)的顏色對(duì)比度。規(guī)則還規(guī)定了一些其他需要考慮的事項(xiàng)——文本的大小以及字體是否加粗。解決方案必須考慮到這一點(diǎn)。

從代碼方面來說，我想這樣做：

<code>// 轉(zhuǎn)換此非通過顏色對(duì)：
.example {
? background-color: #444;
? color: #0094c2; // 當(dāng) AA 需要 4.5 時(shí)，對(duì)比度比為 2.79
? font-size: 1.25rem;
? font-weight: normal;
}

// 到此通過顏色對(duì)：
.example {
? background-color: #444;
? color: #00c0fc; // 對(duì)比度比為 4.61
? font-size: 1.25rem;
? font-weight: normal;
}</code>

這樣做的解決方案能夠捕獲并處理我們前面提到的極端情況。也許設(shè)計(jì)師考慮過將品牌藍(lán)色用于淺藍(lán)色之上，但沒有考慮淺灰色。也許錯(cuò)誤消息中使用的紅色需要針對(duì)具有單次背景顏色的表單進(jìn)行調(diào)整。也許我們想向 UI 實(shí)現(xiàn)暗模式功能，而無需再次重新測(cè)試所有顏色。這些是我考慮的用例。

公式可以帶來自動(dòng)化

W3C 為社區(qū)提供了有助于分析一起使用的兩種顏色的公式。該公式將兩種顏色的 RGB 通道乘以神奇數(shù)字（基于人類如何感知這些顏色通道的視覺權(quán)重），然后將它們相除，得出從 0.0（無對(duì)比度）到 21.0（所有對(duì)比度，只有黑白才能實(shí)現(xiàn)）的比率。雖然不完美，但這正是我們目前使用的公式：

<code>如果 L1 是第一種顏色的相對(duì)亮度
而 L2 是第二種顏色的相對(duì)亮度，則
- 顏色對(duì)比度比 = (L1   0.05) / (L2   0.05)
其中
- L = 0.2126 * R   0.7152 * G   0.0722 * B
并且
- 如果 R sRGB



<p>雖然公式看起來很復(fù)雜，但這只是數(shù)學(xué)運(yùn)算，對(duì)吧？等等。在幾行代碼的末尾有一部分值乘以十進(jìn)制冪——<em>提高到 2.4 次冪</em>。注意到了嗎？事實(shí)證明，這是復(fù)雜的數(shù)學(xué)運(yùn)算，大多數(shù)編程語言都可以完成——想想 Javascript 的 math.pow() 函數(shù)——但 Sass 的功能不足以做到這一點(diǎn)。</p>


<h3>一定還有其他方法……</h3>


<p>當(dāng)然有。只是找到它花了一些時(shí)間。?</p>



<p>我的第一個(gè)版本使用一系列復(fù)雜的數(shù)學(xué)計(jì)算來完成 Sass 可以完成的十進(jìn)制冪的工作。大量的谷歌搜索發(fā)現(xiàn)比我聰明得多的人提供了這些函數(shù)。不幸的是，僅計(jì)算少量顏色對(duì)比度組合會(huì)成倍地增加 Sass 構(gòu)建時(shí)間。因此，這意味著 Sass 可以做到這一點(diǎn)，但這并不意味著它<em>應(yīng)該</em>這樣做。在生產(chǎn)環(huán)境中，大型代碼庫的構(gòu)建時(shí)間可能會(huì)增加到幾分鐘。這是不可接受的。</p>



<p>經(jīng)過更多谷歌搜索后，我偶然發(fā)現(xiàn)了一篇關(guān)于嘗試做類似事情的人的帖子。他們也遇到了 Sass 缺乏指數(shù)支持的問題。他們想探索“使用牛頓逼近法計(jì)算指數(shù)的小數(shù)部分的可能性”。<em>我完全理解這種沖動(dòng)</em>（不）<em>。</em>相反，他們決定使用“查找表”。這是一個(gè)天才的解決方案。查找表不是每次都從頭開始進(jìn)行數(shù)學(xué)運(yùn)算，而是提供所有預(yù)先計(jì)算的可能答案。Sass 函數(shù)從列表中檢索答案，就完成了。</p>



<p>用他們的話來說：</p>



<blockquote><p>Sass 中[唯一]涉及指數(shù)運(yùn)算的部分是作為亮度計(jì)算一部分完成的逐通道顏色空間轉(zhuǎn)換。[T]每個(gè)通道只有 256 個(gè)可能的值。這意味著我們可以輕松創(chuàng)建查找表。</p></blockquote>



<p>現(xiàn)在我們開始行動(dòng)了。我找到了一種性能更好的方法。</p>


<h3>用法示例</h3>


<p>使用該函數(shù)應(yīng)該簡(jiǎn)單且靈活。給定一組兩種顏色，調(diào)整第一種顏色，使其在與第二種顏色一起使用時(shí)，對(duì)于給定的 WCAG 等級(jí)獲得正確的對(duì)比度值?？蛇x參數(shù)還將考慮文本大小或粗細(xì)。</p>



// @function a11y-color(
// ? $color-to-adjust,
// ? $color-that-will-stay-the-same,
// ? $wcag-level: 'AA',
// ? $font-size: 16,
// ? $bold: false
// );
?
// Sass 示例用法，僅聲明必需內(nèi)容
.example {
? background-color: #444;
? color: a11y-color(#0094c2, #444); // 當(dāng) AA 需要 4.5 時(shí)，對(duì)比度比為 2.79，對(duì)于非粗體的小文本
}
?
// 編譯后的 CSS 結(jié)果：
.example {
? background-color: #444;
? color: #00c0fc; // 對(duì)比度比為 4.61
}



<p>我使用函數(shù)而不是 mixin，因?yàn)槲腋矚g獨(dú)立于 CSS 規(guī)則的單個(gè)值的輸出。使用函數(shù)，作者可以確定應(yīng)更改哪種顏色。</p>



<p>一個(gè)包含更多參數(shù)的示例如下所示：</p>



// Sass
.example-2 {
? background-color: a11y-color(#0094c2, #f0f0f0, 'AAA', 1.25rem, true); // 當(dāng) AAA 需要 4.5 時(shí)，對(duì)比度比為 3.06，對(duì)于大于等于 19 像素且加粗的文本
? color: #f0f0f0;
  font-size: 1.25rem;
? font-weight: bold;
}
?
// 編譯后的 CSS 結(jié)果：
.example-2 {
? background-color: #087597; // 對(duì)比度比為 4.6
? color: #f0f0f0;
  font-size: 1.25rem;
? font-weight: bold;
}


<h3>深入探討 Sass 函數(shù)的核心</h3>


<p>為了解釋這種方法，讓我們逐行介紹最終函數(shù)的作用。在此過程中有很多輔助函數(shù)，但核心函數(shù)中的注釋和邏輯解釋了這種方法：</p>



// 預(yù)期：
// $fg 作為將更改的顏色
// $bg 作為將保持靜態(tài)且不會(huì)更改的顏色
// 可選：
// $level，默認(rèn)為 'AA'。也接受 'AAA'
// $size，默認(rèn)為 16。預(yù)期為 PX，允許 EM 和 REM
// $bold，布爾值，默認(rèn)為 false。字體當(dāng)前是否加粗
//
@function a11y-color($fg, $bg, $level: 'AA', $size: 16, $bold: false) {
? // 輔助函數(shù)：確保字體大小值可接受
? $font-size: validate-font-size($size);
? // 輔助函數(shù)：使用級(jí)別、字體大小和粗體布爾值，返回正確的目標(biāo)比率。預(yù)期結(jié)果為 3.0、4.5 或 7.0
? $ratio: get-ratio($level, $font-size, $bold);
? // 計(jì)算給定對(duì)的第一個(gè)對(duì)比度比
? $original-contrast: color-contrast($fg, $bg);

? @if $original-contrast >= $ratio {
? ? // 如果我們已經(jīng)通過比率，則返回原始顏色
? ? @return $fg;
? } @else {
? ? // 未通過。開始工作
? ? // 顏色應(yīng)該變亮還是變暗？
? ? // 輔助函數(shù)：?jiǎn)我活伾斎?，輸出為“亮”或“暗?? ? $fg-lod: light-or-dark($fg);
? ? $bg-lod: light-or-dark($bg);

? ? // 設(shè)置一個(gè)“步長(zhǎng)”值來使顏色變亮或變暗
? ? // 注意：較高的百分比步長(zhǎng)意味著編譯時(shí)間更快，但我們可能會(huì)使用高于 5% 的值超過所需的閾值
? ? $step: 2%;

? ? // 遍歷一些我們想要變暗或使用負(fù)步長(zhǎng)值的情況
? ? @if $fg-lod == 'light' and $bg-lod == 'light' {
? ? ? // 兩者都是淺色，使 fg 變暗（使步長(zhǎng)值變?yōu)樨?fù)數(shù)）
? ? ? $step: - $step;
? ? } @else if $fg-lod == 'dark' and $bg-lod == 'light' {
? ? ? // bg 為淺色，fg 為深色，但未通過，則進(jìn)一步變暗
? ? ? $step: - $step;
? ? }
? ? // 保留此處其余的邏輯，但我們的默認(rèn)值不會(huì)更改，因此不需要此邏輯
? ? //@else if $fg-lod == 'light' and $bg-lod == 'dark' {
? ? // ?// bg 為深色，fg 為淺色，但未通過，則進(jìn)一步變亮
? ? // ?$step: $step;
? ? //} @else if $fg-lod == 'dark' and $bg-lod == 'dark' {
? ? // ?// 兩者都是深色，因此使 fg 變亮
? ? // ?$step: $step;
? ? //}

? ? // 魔法在這里發(fā)生
? ? // 使用 @while 語句循環(huán)，直到顏色組合通過我們所需的比率。按我們的步長(zhǎng)值縮放顏色，直到表達(dá)式為 false
? ? // 這可能會(huì)循環(huán) 100 次或更多次，具體取決于顏色
? ? @while color-contrast($fg, $bg)


<h3>最終 Sass 文件</h3>


<p>這是完整的函數(shù)集！在 CodePen 中打開此文件以編輯文件頂部的顏色變量，并查看 Sass 進(jìn)行的調(diào)整：</p>







<p>所有輔助函數(shù)以及 256 行查找表都在這里。大量的注釋應(yīng)該有助于人們理解正在發(fā)生的事情。</p>



<p>當(dāng)遇到極端情況時(shí)，我在開發(fā)過程中使用帶有調(diào)試輸出的 SassMeister 版本來查看可能發(fā)生的情況。（我將主函數(shù)更改為 mixin，以便我可以調(diào)試輸出。）您也可以隨意查看此內(nèi)容。</p>



<p data-gist-="" data-height="480" data-theme="tomorrow" style="height: 480px; display: flex; align-items: center; justify-content: center; border: 2px solid black; margin: 1rem 0; padding: 1rem; overflow: auto;">在 SassMeister 上試用此 gist。</p>



<p>最后，這些函數(shù)已從 CodePen 中剝離并放入 GitHub 存儲(chǔ)庫中。如果您遇到問題，請(qǐng)?jiān)陉?duì)列中提交問題。</p>


<h3>很棒的代碼！但是我可以在生產(chǎn)環(huán)境中使用它嗎？</h3>


<p><em>也許吧。</em></p>



<p>我想說是的，但我已經(jīng)迭代解決這個(gè)問題一段時(shí)間了。我對(duì)這段代碼充滿信心，但希望獲得更多輸入。在一個(gè)小型項(xiàng)目上使用它并進(jìn)行測(cè)試。讓我知道構(gòu)建時(shí)間性能如何。如果您遇到未提供通過顏色值的極端情況，請(qǐng)告訴我。向 GutHub 存儲(chǔ)庫提交問題。根據(jù)您在實(shí)際應(yīng)用中看到的其他代碼提出改進(jìn)建議。</p>



<p>我想說我已經(jīng)<em>自動(dòng)化了所有輔助功能相關(guān)的事情</em>，但我也知道它需要經(jīng)過道路測(cè)試才能被稱為“生產(chǎn)就緒版?”。我很高興將其介紹給全世界。感謝您的閱讀，我希望很快就能聽到您是如何使用它的。</p></code>

請(qǐng)注意，由于無法直接執(zhí)行代碼，我無法提供實(shí)際的Sass代碼塊。 以上輸出已盡力對(duì)原文進(jìn)行偽原創(chuàng)，并保持了圖片位置和格式。 如果需要更精細(xì)的調(diào)整，請(qǐng)?zhí)峁└唧w的修改要求。

以上是編程SASS創(chuàng)建可訪問的顏色組合的詳細(xì)內(nèi)容。更多信息請(qǐng)關(guān)注PHP中文網(wǎng)其他相關(guān)文章！