SASSをプログラミングして、アクセス可能な色の組み合わせを作成します

ウェブサイトやアプリへのアクセシビリティを改善する最も簡単な方法の1つは、使用する色が目を楽しませてくれることを確認することです。コントラストの高い色は誰にとっても優れており、一般的な目の疲労を軽減するだけでなく、視力障害のあるユーザーにとっても重要です。

私たちのデザインでより良い色の組み合わせを使用するだけでなく、高いコントラストを実現する簡単な方法を見つけましょう。 oomphは、SASS機能がすべての重い持ち上げを実行できるようにするための特定の戦略を採用しています。これを達成する方法を説明します。

色のアクセシビリティについてすでにすべてを知っていて、コードセクションに直接ジャンプしたい場合は、ここをクリックしてください。

「アクセシブ関数の色の組み合わせ」の意味

色のコントラストは、私たちが処理したと思うかもしれないものの1つでもあります。ただし、色のコントラストは、感情によってデザインを判断することだけではありません。 WCAGは、アクセス可能と見なされる許容可能な標準のさまざまなレベルを定義します。 WebAim Contrast Checkerを開き、Webサイトの色の組み合わせを実行します。

私のチームは、デフォルトでWCAGのAAレベルのガイドラインに従います。これはつまり：

• 24ピクセル以上のテキスト、または太字の場合、19ピクセル以上のテキストの色コントラスト比（CCR）は3.0：1です。
• 24ピクセル未満のテキストのCCRは4.5：1でなければなりません。

ウェブサイトがAAレベルの拡張ガイドラインに従う必要がある場合、要件はより高くなります。

• 24ピクセル以上のテキスト、または19ピクセル以上のテキストは、太字の場合、4.5：1の色コントラスト比（CCR）を持っています。
• 24ピクセル未満のテキストのCCRは7：1でなければなりません。

比率？ええと？はい、ここにはいくつかの数学操作があります。しかし、良いニュースは、私たちが自分でそれを行う必要はなく、Stacie Arellanoが最近共有したように計算方法を深く理解していないことです（この記事は、色の支援機能の科学的原則に興味がある場合は必見です）。

これがSASSの出番です。それを使用して、それ以外の場合は理解するのが難しい複雑な数学計算を実行できます。しかし、最初に、デザインレベルでアクセシビリティの色に対処する価値があると思います。

アクセシビリティパレットはデザインから始まります

それは正しい。アクセシビリティパレットを作成するコア作業は、デザインから始まります。理想的には、すべてのWebデザインは、使用されている色の組み合わせが確立されたガイドに合格し、渡されない色を調整するツールを参照する必要があります。当社の設計チームは、これを行うときに社内で開発されたツールを使用しています。カラーリストを処理し、暗い色と明るい色でテストし、他の組み合わせをテストする方法を提供します。

これは私たちのチームが最初にしなければならないことです。多くのブランドカラーは、選択するときに最初にアクセシビリティを置かないと思います。 Webデザインに変換するときに、これらの色を変更する必要があることがよくあります。教育、対話、視覚サンプルを通じて、クライアントに新しいカラーパレットを承認させます。私は認めます：作業のこの部分は、実際にアクセシビリティの色の組み合わせを実装するよりも難しいかもしれません。

自動化を通じて解決したい問題は、極端な状況です。予期せぬ方法で組み合わされている色のいくつかを逃したことで、デザイナーを責めることはできません。これは起こります。そして、これらの極端は、ビルドプロセス中であろうと、1年後にシステムに新しい色を追加するときであろうと発生します。

カラーシステムの意図を維持しながら、補助機能を開発します

アクセシビリティの要件を満たすために色を変えるトリックは、色が同じ色に見えなくなるほど色をあまり変えないことです。エメラルドの緑色が好きなブランドは、その色の意図を維持したいと思うでしょう - その「エメラルド感触」。白い背景のテキストとして使用されたときにアクセシビリティテストに合格するには、緑を暗くして飽和を増加させる必要があるかもしれません。しかし、私たちはまだ色を元の色と「同じ」ものにしたいと思っています。

これを行うには、色相飽和明るさ（HSL）カラーモデルを使用します。 HSLを使用すると、色相を変化させないようにしますが、飽和を調整し（つまり、色を増加または減少させる）、明るさを調整します（すなわち、黒以上を加えます）。色相は緑を緑にしたり、青にしたりします。それは色の「魂」であり、私たちを少し神秘的にします。

色相はカラーホイールとして表され、値は0°から360°の範囲です。黄色は60°、緑は120°、シアンは180°です。輝度も0％から100％の範囲で、0％は明るさがない、50％が白黒、100％は完全な明るさ、または非常に明るい値です。

ツールで色を調整するためのクイックビジュアル：

詳細については、mothereffinghsl.comで楽しいHSL視覚化ツールをお試しください。ただし、より詳細な色覚異常の説明、WCAGカラーコントラストレベル、HSLカラースペースのために、詳細なブログ投稿を書きました。

解決したいユースケース

デザイナーは、レビューしたばかりのツールを使用して色を調整できますが、これまでのところ、魔法の数学でこれを行うことができるSASSを見つけていません。道がなければなりません。

実際のアプリケーションで見た同様の方法を次に示します。

• Josh Baderのアイデアの1つは、CSS変数を使用して色をRGB値に分割して、白または黒が特定のケースで最高のアクセシビリティ色であることを計算することです。
• Facundo Corradiniの別のアイデアは、HSL値とCSSの非常にクールな「スイッチ関数」に似ています。

私はこれらの方法が好きではありません。私は白や黒に戻りたくありません。色を同じままにしたいのですが、アクセスできるように調整されます。さらに、色をRGBまたはHSLコンポーネントに変更し、CSS変数を保存することは混乱しており、大きなコードベースを維持するのが難しいようです。

SASSのようなプリプロセッサでこれを行います。2色の場合、色の1つを自動的に調整して、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は、一緒に使用される2つの色を分析するのに役立つ式をコミュニティに提供します。フォーミュラは、両方の色のRGBチャネルに魔法の数字を掛けます（人間がこれらのカラーチャネルの視覚重みをどのように知覚するかに基づいて）。完璧ではありませんが、これはまさに現在使用している式です。

<code>如果L1 是第一种颜色的相对亮度而L2 是第二种颜色的相对亮度，则- 颜色对比度比= (L1 0.05) / (L2 0.05)其中- L = 0.2126 * R 0.7152 * G 0.0722 * B并且- 如果R sRGB</code>フォーミュラは複雑に見えますが、それは単なる数学ですよね？コードのいくつかの行の終わりには、値の一部に小数パワーを<em>掛け</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>この関数を使用することは、シンプルで柔軟でなければなりません。 2色のセットが与えられた場合、2番目の色で使用すると、指定されたWCAGレベルで正しいコントラスト値が取得されるように、最初の色を調整します。オプションのパラメーターは、テキストのサイズまたは厚さも考慮に入れます。</p>



// @function a11y-color（
// $ color-to-Adjust、
// $ coler-that-will-Stay-the-same、
// $ wcag-level： 'aa'、
// $ font-size：16、
// $ bold：false
//）;


// SASSの例の使用法、必要なcontent.exampleのみを宣言します{
 バックグラウンドカラー：＃444;
 色：A11y-Color（＃0094C2、＃444）; // AAが4.5を必要とする場合、コントラスト比は2.79で、非ボールドの小さなテキストの場合}


//コンパイルされたCSS結果：
。例 {
 バックグラウンドカラー：＃444;
 色：＃00C0FC; //コントラスト比は4.61です
}



<p>CSSルールとは無関係に単一の値の出力を好むため、Mixinの代わりに関数を使用します。関数を使用して、著者はどの色を変更するかを決定できます。</p>



<p>より多くのパラメーターを含む例は次のとおりです。</p>



// sass
.example-2 {
 バックグラウンドカラー：a11y-color（＃0094C2、＃f0f0f0、 'aaa'、1.25rem、true）; // AAAが4.5を必要とする場合、コントラスト比は3.06です。 19ピクセル以上のテキストと太字の色の場合：＃f0f0f0;
  フォントサイズ：1.25rem;
 font-weight：bold;
}


//コンパイルされたCSS結果：
.example-2 {
 バックグラウンドカラー：＃087597; //コントラスト比は4.6です
 色：＃f0f0f0;
  フォントサイズ：1.25rem;
 font-weight：bold;
}


<h3 id="SASS関数のコアを深く探索します">SASS関数のコアを深く探索します</h3>


<p>このアプローチを説明するために、最終的な関数ラインの役割を線ごとに紹介しましょう。プロセスには多くのヘルパー機能がありますが、コア関数のコメントとロジックはこのアプローチを説明しています。</p>



// 期待される：
// $ fg変更される色として// $ bg静的のままで変更されない色として//オプション：
// $レベル、デフォルトは「AA」です。また、「AAA」を受け入れます
// $ size、デフォルトは16です。PXになると予想され、EMとREMを許可します
// $ bold、ブール値、デフォルトはfalseです。フォントは現在太字です//
@function a11y-color（$ fg、$ bg、$ level： 'aa'、$ size：16、$ bold：false）{
 //ヘルパー関数：フォントサイズの値が受け入れられることを確認してください$ font-size：vidalate-font-size（$ size）;
 //ヘルパー関数：レベル、フォントサイズ、および太字のブール値を使用して、正しいターゲット比を返します。予想される結果は3.0、4.5、または7.0です
 $比率：get-ratio（$ level、$ font-size、$ bold）;
 //特定のペアの最初のコントラスト比を計算します$ original-contrast：color-contrast（$ fg、$ bg）;

 @if $ original-contrast> = $ ratio {
  //比率に合格した場合は、元の色@return $ fgを返します。
 } @それ以外 {
  // 失敗した。作業を開始する//色はより明るいか暗いですか？
  //ヘルパー関数：シングルカラー入力、出力は「明るい」または「暗い」です
  $ fg-lod：light-or-dark（$ fg）;
  $ bg-lod：light-or dark（$ bg）;

  //「ステップ」値を設定して色を明るくしたり暗くしたりします

  //ネガティブなステップサイズ値を暗くするか、使用する場合を繰り返します@IF $ fg-lod == 'light'および$ bg-lod == 'light' {
   //どちらも明るい色で、FGを暗くします（ステップサイズの値がネガティブになります）
   $ step： -  $ step;
  } @else $ fg-lod == 'dark'および$ bg-lod == 'light' {
   // BGは明るい色で、FGは暗い色ですが、故障します。
  }
  //ここでロジックの残りを保持しますが、デフォルト値は変更されないため、このロジックは必要ありません
  // // BGは暗く、FGは明るいですが、それはさらに明るくなります// $ step：$ step;
  //} @else $ fg-lod == 'dark'および$ bg-lod == 'dark' {
  // //両方が暗いため、FG // $ step：$ step;
  //}

  //ここで魔法が発生します// @whileステートメントでループ色の組み合わせが必要な比率を通過するまで。式が偽になるまで、ステップ値で色をスケーリングします
  //これは、色 @While Color-Contrast（$ fg、$ bg）に応じて100回以上ループする場合があります


<h3 id="最終的なSASSファイル">最終的なSASSファイル</h3>


<p>これは関数の完全なセットです！このファイルをCodePenで開き、ファイルの上部にある色変数を編集し、SASSによって行われた調整を確認します。</p>







<p>すべてのヘルパー機能と256の行ルックアップテーブルがここにあります。多数のコメントは、人々が何が起こっているのかを理解するのに役立つはずです。</p>



<p>極端な状況に遭遇したとき、私は開発中にデバッグ出力を備えたサスマイスターのバージョンを使用して、何が起こるかを確認します。 （メイン関数を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でこの要点を試してください。</p>



<p>最後に、これらの機能はCodepenから剥奪され、GitHubリポジトリに配置されました。問題がある場合は、キューに問題を提出してください。</p>


<h3 id="素晴らしいコード-しかし-生産環境で使用できますか">素晴らしいコード！しかし、生産環境で使用できますか？</h3>


<p><em>多分。</em></p>



<p>私はイエスと言うでしょうが、私はしばらくこの問題を反復してきました。このコードに自信がありますが、より多くの入力が必要です。小さなプロジェクトで使用してテストしてください。ビルド時間のパフォーマンスを教えてください。色の値が提供されていない極端な状況に遭遇した場合は、お知らせください。問題をGuthubリポジトリに送信します。実際のアプリケーションに表示される他のコードに基づいて改善の提案をします。</p>



<p><em>アクセシビリティに関するすべてを自動化したと</em>思いますが、「Production Ready Edition™」と呼ばれるために道路テストを受ける必要があることも知っています。全世界に紹介できてうれしいです。読んでくれてありがとう、私はあなたがすぐにそれをどのように使用するかを聞きたいと思っています。</p>

コードを直接実行できないため、実際のSASSコードブロックを提供できないことに注意してください。上記の出力は、擬似オリジナルのオリジナルテキストを作成し、画像の位置と形式を維持するために最善を尽くしました。より微細な調整が必要な場合は、より具体的な変更要件を提供してください。

以上がSASSをプログラミングして、アクセス可能な色の組み合わせを作成しますの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。