カラー コントラスト チェッカー: 推測せずに WCAG AA と AAA をヒットする方法

私が初めて出荷したアクセシビリティ バグは、白いカードの明るい灰色のタイムスタンプでした。 figma ではエレガントに見え、キャリブレーションされたモニターでは問題なく見え、駐車中の車で携帯電話で電子メールを読んでいるクライアントには完全に見えませんでした。 彼は視覚障害はありませんでした。 ただの日光でした。 1 枚のサポート チケットでデザイン モックアップでは決してできないことを教えてくれました。コントラストは味の問題ではありません。これは測定可能な特性であり、測定しないと推測が出るということです。

それ以来、私は カラーコントラストチェッカー on Toolz.dev, wired contrast rules into the design tokens for WP Adminify, and audited more React components than I care to count このガイドは、私が最初に誰かが私に手渡してくれたらよかったと思うその体験のバージョンです コントラスト比が実際に何であるか、数値がどのように計算されるか、何を説明しています WCAG しきい値とは、ブランド パレットを捨てずに失敗したカラー ペアを修正する方法を意味します。

tl;dr: WCAG コントラストは、2 色の相対輝度に基づく 1:1 から 21:1 の比率です。 通常の本文の場合、AA に合格するには少なくとも 4.5:1、AAA を渡すには 7:1 以上が必要です。 大きなテキスト (約 24px、または 18.66px 太字) は、AA の場合は 3:1、AAA の場合は 4.5:1 にドロップします。 のん - アイコンや入力境界などのテキスト UI は 3:1 である必要があります。 バックグラウンドでのすべてのテキスト ペアを測定し、AA をパス バーとして扱い、足が下がったときにはツールに色を提案するようにします。

なぜ色のコントラストが重要なのですか?

コントラストは、Web 上で最も一般的なアクセシビリティ障害です。 100 万ページのホームページを自動監査すると、コントラストの低いテキストが、最も頻繁に発生する WCAG 違反であることがわかりました。 ブラインド登録済みのユーザーだけに影響を与えるわけではないため、最も影響を受けるのもこの機能です。 年齢から視力が低下している人、白内障などの一般的な状態の人、安価なディスプレイを使用している人、明るい部屋にいる人、そして太陽が画面に当たったときに私たち一人一人に関係します。

ビジネスの角度もありますが、別のふりをするつもりはありません。 アクセシビリティ法は現在、多くの地域で WCAG を直接参照しています。つまり、アクセスできないインターフェイスは、単なる礼儀の問題ではなく、法的にさらされていることを意味します。 しかし、私が気にする理由と、そのための専用ツールを作った理由はもっと簡単です。 人々が読めないテキストは、唯一の仕事で失敗したテキストです。 誰も使用できない豪華なインターフェイスは、設計上の成果ではありません。

罠は、私たちの目が信頼できないナレーターであるということです。 私たちは自分の画面に適応し、テキストが何を言うべきかを知っているので、脳がそれを埋め、理想的な条件でデザインを調べます。 コントラスト比は、そのすべてを取り除きます。 モニターや期待を気にしない数字が表示されます。

コントラスト比とは正確には何ですか？

コントラスト比は、前景 (通常はテキスト) と背景の 2 つの色の相対輝度を比較したものです。 相対輝度は、人間の目に実際に赤、緑、青をどのように認識するかを重み付けした、色がどれだけの光を放出または反射するかの尺度です。 緑は、知覚される明るさに最も大きく貢献します。そのため、黒の純粋な青色のテキストは、純粋な緑よりもはるかに読みにくいのです。

比率自体は、WCAG によって次のように定義されます。

(L1 + 0.05) / (L2 + 0.05)

どこ L1 明るい色の相対的な輝度と L2 それは暗いものです。 ザ・ 0.05 用語のモデル 画面から反射する周囲光のため、スケールが無限大に到達することはありません。 同じ色の場合、正確に 1:1 の比率が生成されます。 純粋な白の純粋な黒のテキストは、最大 21:1 になります。 この 2 つの極端の間のすべての現実の生活。

内面化すべき重要なことは、比率が "different" 2 つの色が色相の意味でどのように見えるかに対して直線的ではないということです。 2 つの色は色相が大きく異なる可能性があり、飽和した赤と飽和した緑などですが、依然として輝度がほぼ同じであるため、激しく衝突しても読みやすさの悪夢になります。コントラストは色の違いではなく、明るさの違いに関するものです。それがまさに、目で見ることができない理由であり、なぜ カラーコントラストチェッカー 比較する前に、両方の色を輝度に変換します。

数値は実際にどのように計算されますか?

ツールを信頼するだけでなく、理解したい場合は、WCAG 2.2 の定義に正確に従った完全なパイプラインをここに示します。

まず、各カラー チャネルが 0 ～ 255 の範囲から 0 ～ 1 に正規化されます。 次に、各チャネルを線形化して、sRGB ガンマ曲線を元に戻します。 この式は、非常に暗い値には小さな線形セグメントを適用し、残りの場合はパワー カーブを適用します。

c_linear = c / 12.92                        if c <= 0.03928
c_linear = ((c + 0.055) / 1.055) ^ 2.4      otherwise

次に、3 つの線形化されたチャネルは、人間の知覚を反映する輝度係数と結合されます。

L = 0.2126 * R + 0.7152 * G + 0.0722 * B

これらの重みは任意ではありません。 それらは、目のコーン細胞がさまざまな波長に反応する方法から来ており、緑が支配的である理由です。 最後に、2 つの輝度値が上記の比率式に差し込まれ、上に軽い値が付いています。

人々をつまずかせる微妙な点が 1 つあります。それは透明性です。 半透明の色の実際の外観は、その背後にあるものに依存するため、コントラスト比は 2 つの不透明な色の間でのみ意味があります。 テキストの色にアルファ値がある場合、直接測定することはできません。 正しいアプローチとは、最初に標準のソース オーバー ブレンドを使用して、背景の上に半透明の前景を合成し、次に平坦化された結果に対する比率を測定することです。 これは、ユーザーが実際に表示する色ではなく、ユーザーが実際に見るものと一致します。

達成する必要がある WCAG のしきい値は何ですか?

WCAG は、2 つの適合レベルで、3 つの幅広いコンテンツ タイプのコントラスト要件を定義します。 これが 1 か所に全体像です。

この表を何度も適用したことについて、いくつかのメモがあります。 「大きなテキスト」は、テキストがどれほど重要かを感じさせるのではなく、レンダリングされたサイズによって定義されます。 しきい値は、通常の重量で 18pt であり、太字で 14pt で、およそ 24px と 18.66px に相当します。 より大きな文字はコントラストが低い場合に読みやすいため、AA の 3:1 バーを緩和する以上のものはすべてです。

UI-components ルールは Success Criterion 1.4.11 で、チームが最も頻繁に忘れるものです。インタラクティブ コンポーネントの視覚的な境界、つまりテキスト入力の境界、ボタンの輪郭、意味を伝えるアイコンの形状は、周囲に対して 3:1 必要であると書かれています。目に見えない入力境界を持つ AA パスのラベル テキストでいっぱいのフォームはまだ失敗しており、私はそれを本番環境で何度も見てきました。

最後に、装飾的なテキスト、無効なコントロール、ロゴは免除されます。 その免除は狭い。 グレー表示されたボタンのラベルは問題ありません。「二次」と呼ばれるコントラストの低い段落はそうではありません。

カラーコントラストチェッカーの使い方

私が毎日使っているワークフローは、ペアあたり約 10 秒かかります。 を開きます カラーコントラストチェッカー そして最初のフィールドにテキストの色を入力します。 - のような6 桁の16 進数 - 任意の形式を貼り付けることができます #4b5563、アルファベットの 8 桁の 16 進数。 rgb() や rgba() 文字列、 hsl() 値、または単純な CSS キーワードのような navy。 このツールは、与えたものをすべて正常化するため、2 つのフィールド間でフォーマットを自由に混在させることができます。

2 番目のフィールドに背景色を入力します。 どちらも有効な瞬間です。実際の背景にレンダリングされた大きな、法線、およびキャプション テキストのライブ サンプルと正確な比率が表示されます。 それは重要です。 数字は合格かどうかを示しますが、実際の色で実際の単語を見ると、それが快適かどうかがわかります。これは、合法性よりも高い基準です。

比率を下回ると、パスバッジとフェイルバッジのグリッドが得られます: 通常テキストと大きなテキストの両方でAAとAAA、さらに3:1 のUIコンポーネントチェックが組み合わさって失敗した場合、ツールはワンクリック修正を提供します。 HSLスペースでテキストの色を明るくしたり暗くしたりします - 選択した色相と彩度を維持します - ターゲット比をクリアするまで、次にスタイルシートに直接コピーできる通過値を手渡します。最後の部分は、あなたを叱るチェッカーと実際に役立つチェッカーの違いです。ブランドの色相はそのままに保ち、必要な最小限だけ明るさを動かします。

すべてがブラウザでローカルに実行されます。 クライアントの発売前のデザイン システムを監査するときに重要な、色、パレット、または未発表のブランド価値がデバイスから離れることはありません。 これは、サイト上のすべてのツールで使用するプライバシー優先のアプローチと同じで、なぜそのアーキテクチャが重要なのかについて書きました。 データ プライバシー ガイド。

実際のプロジェクトのよくあるユースケース

デザイン システムのトークンの監査

新しいプロジェクトのカラー トークンを設定するとき、1 つのコンポーネントが出荷される前にすべてのセマンティック ペアリングをチェックします。背景のプライマリ テキスト、背景のミュートされたテキスト、プライマリのテキスト、カードのテキスト、すべてのアラート バリアントのテキスト。 一度失敗したトークンは、使用されている場所で失敗するため、トークン レベルでそれをキャッチする方が、コンポーネントごとにキャッチするよりも非常に安くなります。 簡単なチェックリストを保持し、各ペアをチェッカーに通し、トークン名の横にある比率を記録します。

「使用する」ブランドの色を救う

マーケティングはあなたにブランドブルーを手渡し、ボタンはそれを使用しなければならないと言いますあなたはその上の白いテキストをテストし、3.1:1 を取得します - 大きなテキストには問題なく、通常のサイズのボタンのラベルには失敗しますあなたは3 つの正直なオプションを持っています: インタラクティブな表面のためにブランドブルーを少し暗くする、3:1 のしきい値が適用されるように大きいまたは太字のラベルを使用する、またはボタンが軽い場合はラベルをより濃い色に切り替えるツール& #39; sの提案機能は、フラットではなく具体的な、最小の変化をマーケティングを表示できるように、最も近い通過日陰を見つけます " no. "

プレースホルダーとヘルパー テキストを確認する

プレースホルダー テキストは、ブラウザーがデフォルトで不透明度を減らし、その上で既に明るいグレーを選択するため、再犯者です。 公称色ではなく、合成結果をテストすることを忘れないでください。 Checker の Alpha Compositing は、入力の背景に実際の不透明度を含むプレースホルダーの色を入力し、真の比率を読み取ります。

アイコンと境界線の表示を確認する

1.4.11 UI チェックでは、アイコンまたは境界線の色を、そのすぐ後ろにあるものに対してテストします。白いカードの灰色の仕切り、色付きのヘッダーの山形、フィールドに対するフォーカス リング - これらすべてに 3:1 が必要です。 " をキャッチするクイック チェックです。技術的にはすべてありますが、私は ' it" のどれも見えません。バグの一種。

これは、デザイン ツールの組み込みチェックを使用する場合と比べてどうですか?

デザイン ツールはコントラスト インジケータを追加し、ブラウザー開発ツールはカラー ピッカーで比率を示します。そのため、なぜ専用のツールに手を伸ばすのかという公平な疑問が生じます。 これが私の正直な比較です。

専用ツールは、レンダリングされたページではなく値から作業しているとき、つまりトークンのレビュー、仕様のチェック、報告されたバグの修正など、ただの評決ではなく、合格した代替ツールが必要なときはいつでも勝ちます。ブラウザ開発ツールは、ページが存在して実際に何が出荷されたかをスポットチェックしたいとき、さまざまな段階で両方を使用します。

気になるチームのための高度なメモ

私が学んだいくつかのことは、基本を超えています。 まず、コントラストは必要ですが、十分ではありません。 4.5:1 を渡すと、1 つのバリアが取り除かれます。インターフェイス自体にアクセスできるようにはなりません。 目に見えるフォーカス状態が必要です。色だけで意味を伝えることは避けなければなりません。また、実際の支援技術による実際のテストが必要です。 比率を最終決算ではなく、フロアとして扱います。

第二に、ダークモードは無料ではありません。 ライト モードで通過するパレットは、輝度関係が反転するため、ダーク モードで失敗する可能性があります。 両方のテーマを確認してください。 チェッカーのダークバックグラウンド プレビュー トグルは、私が忘れ続けたため、存在するのです。

第 3 に、「十分に近い」ことに注意してください。4.48:1 の比率は失敗であり、丸めの勝利ではありません。 画面はさまざまで、ユーザーはさまざまで、しきい値には何らかの理由でマージンが組み込まれています。 境界線にある場合は、それを押し進めてください。

より広範なツールキットを組み立てる場合、 Web 開発者ツールキット ガイド 自動化する価値のある他のチェックとコントラストがどのように適合するかについて説明します。 そして、あなたの色が過ぎたら、次のようなツールを グラデーションジェネ あんど カラーピッカー すでに検証した基盤に残りのパレットを構築するのに役立ちます。 ページ メタデータとソーシャル プレビューも生成する場合、 メタ タグ ジェネレーター 同じ打ち上げ前のパスでうまくペアリングされます。

フェイク

良い色のコントラスト比とは何ですか?

通常の本文の場合は、WCAG AA を満たすには少なくとも 4.5:1、より厳密な AAA レベルを満たすには 7:1 を目指してください。 大きなテキストは、約 24px または 18.66px 太字で、AA の場合は 3:1、AAA の場合は 4.5:1 しか必要としません。 アイコンとインタラクティブな UI コンポーネントは、周囲に対して少なくとも 3:1 必要です。

WCAG の下で大きなテキストとしてカウントされるものは何ですか?

大きなテキストは、太字の場合は、少なくとも 18pt、およそ 24px、通常の重量、または少なくとも 14pt、およそ 18.66px です。 サイズ以上のテキストは、3:1 の緩和の AA しきい値に適しています。これは、小さい文字よりもコントラストが低い場合に大きな文字形式で読みやすいためです。

WCAG AA と AAA の違いは何ですか?

AA は、法律と組織が最もターゲットとするレベルであり、通常のテキストに対して 4.5:1 を必要とします。 AAA は強化されたレベルであり、7:1 を必要とします。これは、視力が低いユーザーを対象としたコンテンツに適していますが、パレット全体でヒットするのは困難です。 ほとんどのチームは、AA をパスバーとして扱い、AAA を重要な読書コンテンツの願望として扱います。

コントラスト比はどのように計算されますか?

各色は、WCAG 相対輝度、ガンマ補正された知覚的に加重された明るさの測定値に変換されます。 比率が (L_Lighter + 0.05) で割られ、(L_darker + 0.05) で、同じ色の 1:1 から純粋な白の純黒の場合の 21:1 の値が生成されます。

透明度はコントラストの結果に影響しますか?

はい。 半透明のテキストの色は、背景を透かして見せることができ、有効な色が変わります。 正しい方法は、最初に背景の上に半透明の前景を合成してから比率を測定することです。これにより、ユーザーが設定した呼び色ではなく、ユーザーが実際に見たものがスコアに反映されます。

テキストが大サイズで渡され、通常のサイズで失敗するのはなぜですか?

しきい値が異なります。 通常のテキストは AA で 4.5:1 である必要がありますが、大きなテキストは 3:1 しか必要としないため、3 から 4.5 の比率は見出しに対してパスを渡しますが、本文のコピーでは失敗します。 本文のコントラストを上げるか、または、緩和されたしきい値が適用される大きなサイズでのみペアリングが使用されるようにします。

通過するコントラスト比は、アクセシビリティに十分ですか?

いやー コントラストは必要ですが、十分ではありません。 目に見えるフォーカス状態も必要です。色だけで意味を伝えることは避け、実際のコンテンツと支援技術でテストする必要があります。 この比率を渡すと、1 つの一般的な障壁が取り除かれますが、それ自体ではインターフェースにアクセスできません。

カラー コントラスト チェッカーは私の色をどこにでも送ってくれますか?

いやー 。 JavaScript を使用して、すべての解析と数学がブラウザーでローカルに実行されます。 カラー値、ブランド パレット、またはスクリーンショットはアップロードまたは保存されず、ページが読み込まれた後もネットワーク接続なしでツールは引き続き機能します。