色のコントラストと WCAG: アクセシビリティ検査を通す

色のコントラストは、実際の監査で最もよく失敗するアクセシビリティ要件です。 WebAIM の毎年の上位 100 万ホームページのスキャンは、そのうち 80% を超える ところで低コントラストのテキストを年々指摘してきました。失敗する理由は、計算が 見えないからです。薄暗い部屋の較正されたモニターでデザイナーに問題なく見える 前景と背景が、低視力のユーザーに、屋外のまぶしさの中の誰かに、またはガンマ曲線が つぶれた安いパネルの誰かに読めないことがあります。WCAG は推測を取り除く数字を くれますが、その数字は間違えやすく誤解しやすいものです。この記事は、それがどう 計算されるか、重要なしきい値、そしてモデルが崩れるところを扱います。

コントラスト比

WCAG はコントラストを 2 色の間の比で表し、1:1 (同一の 2 色、コントラストなし) から 21:1 (純黒の上の純白、最大) までです。比は各色の 相対輝度 からこの公式で 計算されます。

(L1 + 0.05) / (L2 + 0.05)

ここで L1 は明るいほうの色の相対輝度、L2 は暗いほうの相対輝度です。0.05 の 項は、画面で反射する周囲光をモデル化するフレア定数です。それがないと、純黒に 対する比が無限大に向かいます。

相対輝度は生の RGB 値ではありません。各チャネルはまず 0–1 の範囲に正規化され、 次に sRGB のガンマ曲線 (モニターが適用するエンコードを戻す伝達関数) を解くために 線形化 され、それから 3 つの線形チャネルが重み付けして合算されます。重みは 等しくありません。緑が知覚的な明るさに最も寄与し、赤が中間、青が最も少なく寄与 します。だから素朴な意味で同じ明度を持つ 2 色が、まったく異なる輝度を持ちえます。 同じ「強さ」の青のアクセント色を緑に替えると、しきい値をまたいで動きえます。

これを手で計算することはまれです。その形を理解する要点は、カラーピッカーの明度 スライダーがなぜコントラストの操作ではないのかを知ることです。明度と輝度は関係 しますが同じではなく、その重み付けがコントラストの検査を自明でなくします。

しきい値

WCAG 2.1 は 2 つの適合レベルで合否のしきい値を定義し、テキストのサイズと非 テキスト要素に異なる基準を置きます。

要素	AA	AAA
通常テキスト	4.5:1	7:1
大きいテキスト	3:1	4.5:1
UI コンポーネント・図形オブジェクト	3:1	(AAA 要件なし)

「大きいテキスト」には正確な定義があります。最低 18pt (おおよそ 24px)、 または 14pt ボールド (おおよそ 18.66px ボールド) です。それより小さいもの は「通常テキスト」で、AA でより高い 4.5:1 の基準を通過しなければなりません。 サイズのしきい値が存在する理由は、大きいグリフはストロークの面積が大きく、与えられた コントラスト比が大きいサイズで読みやすいからです。

3 行目は WCAG 2.1 の達成基準 1.4.11 (非テキストのコントラスト) から来ます。入力の 枠線、ボタンの輪郭、トグルの状態、フォーカスの表示子のような UI コントロールの 境界と、チャートの線やアイコンの形のような情報を伝える図形の意味ある部分を扱い ます。これらは隣接する色に対して 3:1 が必要です。この基準はテキストの規則より 新しく、広く見落とされます。テキストが通過するフォームが、入力フィールドの 1.5:1 の細い枠線のせいで依然として失敗することがあります。

AA はほとんどの法的・調達の文脈で引用される適合レベルです (EU の EN 301 549、 米国の Section 508 改訂、そしてほとんどの企業のアクセシビリティ方針)。AAA は一般 コンテンツに対しては目標的です。WCAG 自身が、サイト全体にわたる AAA 適合はしばしば 達成不可能だと述べています。

監査が最もよく指摘する失敗

ひと握りのパターンがコントラスト違反の大半を占めます。

• 薄いグレーのプレースホルダーと補助テキスト。 白背景の #999 は、 プレースホルダーやキャプションのほぼ普遍的なデフォルトです。約 2.85:1 と計算され、 通常テキストに対して明白な AA の失敗です。プレースホルダーのテキストは実際の コンテンツで、同じ基準で判断されます。
• 問題なく見えるブランド色。 中間トーンのブランドパレットが典型的な罠です。 彩度の高いブランドのオレンジや空色は、それを選んだチームには自信があって読み やすく見え、やがて白背景の 4.5:1 を僅差で失敗します。色が「間違い」なのではなく、 その組み合わせで本文テキストを運べないだけです。
• 画像やグラデーションの上のテキスト。 ヒーローの見出しが写真の上に乗ります。 コントラストは画像の暗い 3 分の 1 の上では問題なく、明るい 3 分の 1 の上では 失敗します。背景が単一の色ではないので、監査や自動ツールはここで苦労します。
• 無効状態。 無効のコントロールは明示的にコントラスト要件から 免除 されます。 それはユーザビリティの勝利ではなく適合上の技術的な事項です。誰も読めないほど かすんだ無効のボタンは依然として悪い体験で、ユーザーはしばしば「無効」と「故障」を 区別できません。
• ホバーとフォーカスの状態。 チームはリンクやボタンの静止状態を確認し、ホバー・ アクティブ・フォーカスのスタイルがそれぞれ通過しなければならない新しい色の組み 合わせを導入することを忘れます。とくにフォーカスの表示子は 3:1 の非テキストの 規則に該当します。

実用的な修正

修正はたいてい小さく局所的です。

最もよくあるのは 1 つの色を少しずらす ことです。明るすぎるグレーを #999 から 約 #767676 に暗くすると、文字の変化なしに白背景の 4.5:1 を通過します。失敗する ブランド色は捨てる必要がまれです。テキスト用に数パーセント暗くしつつ、大きな表示用 の文字や装飾的な塗りには元を保つだけで十分です。素早く反復する一つの方法は、ある 記法で値をいじり、私たちの カラー変換器 で別の記法に読み 戻して結果を確認することです。

画像の上のテキスト には、スクリム (scrim) を足してください。画像とテキストの 間の半透明の暗い (または明るい) レイヤー、またはテキストブロックの背後だけに置く グラデーションのオーバーレイです。これは、写真が下で何をしていようと、既知の背景 輝度を保証します。

最後に、色だけに頼らないでください。 これは別の WCAG 基準 (1.4.1、色の使用) であってコントラストの規則ではありませんが、同じ作業とともに回ります。赤くなる だけで示されるエラーフィールド、色相だけで本文テキストと区別されるリンク、色だけで 識別されるチャートの系列は、すべて色の違いを知覚できないユーザーに対して失敗します。 色とともにアイコン、下線、ラベル、またはパターンを足してください。

モデルが崩れるところ

WCAG 2 のコントラスト公式が何であるかを正直に言いましょう。鈍い道具です。計算が 単純であるよう設計され、人の知覚を特別うまくモデル化しません。一部のダークモードの 組み合わせには寛大すぎ (暗い背景の上の明るいテキストが、細く読みにくく見えながら 比を通過しえます)、ある明るい上に明るい組み合わせには厳しすぎることが知られて います。単一の「大きいテキスト」のカットオフを超えるフォントの太さやサイズは、細い ヘアラインのフォントと太いグロテスクが同じ色の組み合わせでまったく違って読まれる のに、まったく入りません。

提案されている代替は APCA (アクセシブル知覚コントラストアルゴリズム) で、 WCAG 3 のために開発中のコントラスト手法です。APCA は組み合わせの極性 (暗い上に 明るい対、明るい上に暗いが目に異なって働く) を考慮し、フォントの太さとサイズを 反映します。意味のある改善ですが、まだ草案です。WCAG 3 が勧告になるには数年あり、 APCA は 規範的ではありません。今日適合の義務があるなら、WCAG 2.1 の 4.5:1 / 3:1 の数字に対してテストします。APCA は境界のケースに有用なサニティチェックとして 扱い、引用する標準としては扱わないでください。

特定の前景/背景の組み合わせを AA と AAA のしきい値に対して、大きいテキストと UI コンポーネントの基準も含めて確認したいときは、私たちの 色コントラストチェッカー が比を計算し、どのレベルを通過する かを教えてくれるので、境界の色を監査に現れる前に解決できます。