編程SASS創建可訪問的顏色組合

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

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

如果您已經了解顏色輔助功能的所有知識，並想直接跳到代碼部分，請點擊此處。

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

顏色對比度也是我們可能認為已經處理好的事情之一。但是，高顏色對比度不僅僅是憑感覺判斷設計。 WCAG 定義了不同的可接受標準級別，這些級別被認為是可訪問的。打開WebAIM 對比度檢查器，運行網站的顏色組合，這實際上會讓人謙卑。

我的團隊默認遵守WCAG 的AA 級指南。這意味著：

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

如果網站需要遵守AA 級增強的指南，要求會更高一些：

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

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

這就是Sass 的用武之地。我們可以利用它來運行複雜的數學計算，否則這些計算會讓我們難以理解。但首先，我認為值得在設計層面處理輔助功能顏色。

輔助功能調色板始於設計

沒錯。創建輔助功能調色板的核心工作始於設計。理想情況下，任何網頁設計都應該參考工具來驗證任何使用的顏色組合是否通過既定指南，然後調整未通過的色彩。我們的設計團隊在執行此操作時，使用我們內部開發的工具。它處理顏色列表，在深色和淺色上測試它們，並提供測試其他組合的方法。

這是我們團隊首先要做的事情。我敢說，許多品牌顏色在選擇時並沒有將輔助功能放在首位。我經常發現，這些顏色在轉換為網頁設計時需要更改。通過教育、對話和視覺樣本，我們讓客戶批准新的調色板。我承認：這部分工作可能比實際實施輔助功能顏色組合更難。

我想通過自動化解決的問題是極端情況。您不能責怪設計師遺漏了一些顏色以意外方式組合的情況——這種情況確實會發生。而這些極端情況將會出現，無論是在構建過程中還是一年後添加新顏色到系統中時。

在保持顏色系統意圖的同時開發輔助功能

將顏色更改為滿足輔助功能要求的技巧在於，不要過多地更改顏色，以至於它們看起來不再是相同的顏色。一個喜歡其翡翠綠顏色的品牌會希望保持該顏色的意圖——它的“翡翠感”。為了使其在用作白色背景上的文本時通過輔助功能測試，我們可能需要加深綠色並增加其飽和度。但我們仍然希望顏色與原始顏色“相同”。

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

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

在我們的工具中調整顏色的快速視覺效果：

要了解更多信息，請在mothereffinghsl.com 上試用有趣的HSL 可視化工具。但是，對於更深入的色盲描述、WCAG 顏色對比度級別和HSL 顏色空間，我們撰寫了一篇深入的博文。

我想要解決的用例

設計師可以使用我們剛剛回顧過的工具來調整顏色，但是到目前為止，我還沒有發現任何Sass 可以用神奇的數學方法做到這一點。一定有辦法。

以下是我在實際應用中看到的一些類似方法：

• Josh Bader 的一個想法是使用CSS 變量並將顏色拆分為其RGB 值，以計算在給定情況下白色或黑色是最佳輔助功能顏色。
• Facundo Corradini 的另一個想法與HSL 值和CSS 中非常酷的“開關函數”類似。

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

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

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

 <code>// 转换此非通过颜色对： .example { background-color: #444; color: #0094c2; // 当AA 需要4.5 时，对比度比为2.79 font-size: 1.25rem; font-weight: normal; } // 到此通过颜色对： .example { background-color: #444; color: #00c0fc; // 对比度比为4.61 font-size: 1.25rem; font-weight: normal; }</code>

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

公式可以帶來自動化

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

<code>如果L1 是第一种颜色的相对亮度而L2 是第二种颜色的相对亮度，则- 颜色对比度比= (L1 0.05) / (L2 0.05)其中- L = 0.2126 * R 0.7152 * G 0.0722 * B并且- 如果R sRGB</code>雖然公式看起來很複雜，但這只是數學運算，對吧？等等。在幾行代碼的末尾有一部分值乘以十進制冪——<em>提高到2.4 次冪</em>。注意到了嗎？事實證明，這是複雜的數學運算，大多數編程語言都可以完成——想想Javascript 的math.pow() 函數——但Sass 的功能不足以做到這一點。


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


<p>當然有。只是找到它花了一些時間。 ?</p>



<p>我的第一個版本使用一系列複雜的數學計算來完成Sass 可以完成的十進制冪的工作。大量的谷歌搜索發現比我聰明得多的人提供了這些函數。不幸的是，僅計算少量顏色對比度組合會成倍地增加Sass 構建時間。因此，這意味著Sass 可以做到這一點，但這並不意味著它<em>應該</em>這樣做。在生產環境中，大型代碼庫的構建時間可能會增加到幾分鐘。這是不可接受的。</p>



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



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



<blockquote><p>Sass 中[唯一]涉及指數運算的部分是作為亮度計算一部分完成的逐通道顏色空間轉換。 [T]每個通道只有256 個可能的值。這意味著我們可以輕鬆創建查找表。</p></blockquote>



<p>現在我們開始行動了。我找到了一種性能更好的方法。</p>


<h3 id="用法示例">用法示例</h3>


<p>使用該函數應該簡單且靈活。給定一組兩種顏色，調整第一種顏色，使其在與第二種顏色一起使用時，對於給定的WCAG 等級獲得正確的對比度值。可選參數還將考慮文本大小或粗細。</p>



// @function a11y-color(
//  $color-to-adjust,
//  $color-that-will-stay-the-same,
//  $wcag-level: 'AA',
//  $font-size: 16,
//  $bold: false
// );


// Sass 示例用法，僅聲明必需內容.example {
 background-color: #444;
 color: a11y-color(#0094c2, #444); // 當AA 需要4.5 時，對比度比為2.79，對於非粗體的小文本}


// 編譯後的CSS 結果：
.example {
 background-color: #444;
 color: #00c0fc; // 對比度比為4.61
}



<p>我使用函數而不是mixin，因為我更喜歡獨立於CSS 規則的單個值的輸出。使用函數，作者可以確定應更改哪種顏色。</p>



<p>一個包含更多參數的示例如下所示：</p>



// Sass
.example-2 {
 background-color: a11y-color(#0094c2, #f0f0f0, 'AAA', 1.25rem, true); // 當AAA 需要4.5 時，對比度比為3.06，對於大於等於19 像素且加粗的文本 color: #f0f0f0;
  font-size: 1.25rem;
 font-weight: bold;
}


// 編譯後的CSS 結果：
.example-2 {
 background-color: #087597; // 對比度比為4.6
 color: #f0f0f0;
  font-size: 1.25rem;
 font-weight: bold;
}


<h3 id="深入探討Sass-函數的核心">深入探討Sass 函數的核心</h3>


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



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

 @if $original-contrast >= $ratio {
  // 如果我們已經通過比率，則返回原始顏色  @return $fg;
 } @else {
  // 未通過。開始工作  // 顏色應該變亮還是變暗？
  // 輔助函數：單一顏色輸入，輸出為“亮”或“暗”
  $fg-lod: light-or-dark($fg);
  $bg-lod: light-or-dark($bg);

  // 設置一個“步長”值來使顏色變亮或變暗  // 注意：較高的百分比步長意味著編譯時間更快，但我們可能會使用高於5% 的值超過所需的閾值  $step: 2%;

  // 遍歷一些我們想要變暗或使用負步長值的情況  @if $fg-lod == 'light' and $bg-lod == 'light' {
   // 兩者都是淺色，使fg 變暗（使步長值變為負數）
   $step: - $step;
  } @else if $fg-lod == 'dark' and $bg-lod == 'light' {
   // bg 為淺色，fg 為深色，但未通過，則進一步變暗   $step: - $step;
  }
  // 保留此處其餘的邏輯，但我們的默認值不會更改，因此不需要此邏輯  //@else if $fg-lod == 'light' and $bg-lod == 'dark' {
  //  // bg 為深色，fg 為淺色，但未通過，則進一步變亮  //  $step: $step;
  //} @else if $fg-lod == 'dark' and $bg-lod == 'dark' {
  //  // 兩者都是深色，因此使fg 變亮  //  $step: $step;
  //}

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


<h3 id="最終Sass-文件">最終Sass 文件</h3>


<p>這是完整的函數集！在CodePen 中打開此文件以編輯文件頂部的顏色變量，並查看Sass 進行的調整：</p>







<p>所有輔助函數以及256 行查找表都在這裡。大量的註釋應該有助於人們理解正在發生的事情。</p>



<p>當遇到極端情況時，我在開發過程中使用帶有調試輸出的SassMeister 版本來查看可能發生的情況。 （我將主函數更改為mixin，以便我可以調試輸出。）您也可以隨意查看此內容。</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>最後，這些函數已從CodePen 中剝離並放入GitHub 存儲庫中。如果您遇到問題，請在隊列中提交問題。</p>


<h3 id="很棒的代碼-但是我可以在生產環境中使用它嗎">很棒的代碼！但是我可以在生產環境中使用它嗎？</h3>


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



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



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

請注意，由於無法直接執行代碼，我無法提供實際的Sass代碼塊。 以上輸出已盡力對原文進行偽原創，並保持了圖片位置和格式。 如果需要更精細的調整，請提供更具體的修改要求。

以上是編程SASS創建可訪問的顏色組合的詳細內容。更多資訊請關注PHP中文網其他相關文章！