オレンジのリンク、写真の上の見出し、ホバー時のボタンが読みにくい

どの色もデザインファイルの上で自然に見えるよう選ばれています。オレンジはブランドの色で、白い見出しは写真の暗い部分では映え、薄いホバーは軽い演出に見えます。しかし、利用者が見る状態で、文字の実際の後ろの色に対して測定されたものはありません。

リンクと価格は同じオレンジの濃い色を使い、5.12:1になります。見出しは60%の黒い背景の上にあります。最も明るい写真、つまり真っ白の上でもこの背景は #666666 になり、白い文字は5.74:1です。どの写真に差し替えても崩れません。ホバー状態は明るくせずに濃くして7.68:1にし、下線で色に頼らない手がかりも加えます。

ブランドカラーは残し、その色に合った役割を与えます。文字としては基準を満たさない明るいオレンジも、大きな面の塗り、装飾の線、暗い文字をのせる背景には使えます。文字用の濃い色は専用のトークンにして、どのオレンジが文字に使えるかを覚えておく必要がないようにします。

画像の上の文字は、平均ではなく最も不利な部分で測定します。背景のパネル、文字の下のグラデーション、写真自体を暗くする方法のいずれも有効です。編集者がどの画像をアップロードしても影響を受けないため、背景のパネルが最も確実です。細い文字の影だけで比率に届くことはまれです。影に頼る場合は、各文字の実際の後ろの色を測定してください。

ホバー、フォーカス、押下中、訪問済み、選択中の状態もすべて対象です。色が変わる状態はそれぞれ確認します。文字への opacity や半透明の文字色にも注意してください。計算された結果は、トークンの色より薄くなります。ダークモードを含め、サイトが提供するテーマごとに測定が必要です。白の上で基準を満たす組み合わせも、グレーの上では満たさないことがあります。

ロゴ、無効化された操作要素の文字、純粋な装飾や見えない文字は対象外です。プレースホルダーは対象外ではなく、ページで最も薄い文字であることがよくあります。強制カラーでは、ブラウザーが文字と背景の色を利用者の設定に置き換え、Chromiumでは画像の上の文字の後ろに背景板が描かれます。想定に頼らず、強制カラーでもヒーローを確認してください。

WebAIMのContrast Checkerは、色の組み合わせが分かっている場合に最も手軽な方法です。文字の色を前景（Foreground）、後ろの色を背景（Background）に、16進数で入力します。WCAG AAの2つの結果を確認します。「Normal Text」が4.5:1、「Large Text」が3:1の判定です。基準を満たさない場合は、前景の下のLightnessスライダーを動かし、AAの両方の結果が合格になる色を探します。ブランドの #e8762c から、文字用の #b4501a を見つけたのもこの方法です。透明度は入力できないため、実際に表示される色を入力します。DevToolsの計算済みスタイルからコピーするか、画面から色を取得してください。

ブラウザーのDevToolsでは、ページ上でそのまま測定できます。ChromeやEdgeでは、文字を検証し、Stylesペインの color の横にある色見本をクリックします。カラーピッカーに、検出された背景に対するコントラスト比が表示され、AAとAAAの判定と、基準を満たす色の候補も示されます。ホバーとフォーカスは、:hov パネルで :hover または :focus-visible にチェックを入れてから、もう一度色見本をクリックして測定します。FirefoxのAccessibility Inspectorでもコントラストを確認できます。どちらも、写真のどの部分が各文字の後ろにあるかは判断できないため、画像の上の文字の数値は当てにしないでください。

Colour Contrast Analyser（CCA）は、TPGiが無料で提供するデスクトップアプリで、画面上の任意の画素を取得できるスポイトがあります。画像の上の文字に使います。文字の色を取得し、次に文字の後ろの最も明るい画素（暗い文字なら最も暗い画素）を取得します。テキストの枠に表示されうるすべての画像で繰り返します。