AIものさし

AIの配色案を文字コントラスト比で確認する方法｜丸めずに基準と比べる

AIが提案した文字色と背景色を、不透明sRGBの計算例で確認する方法。白背景の灰色4例、4.5:1との比較、丸め表示、対象条件と実画面確認を分けます。

AIものさし編集部

AIに配色を提案してもらったら、文字色と背景色の組を数値で確認します。「落ち着いた灰色」「読みやすい色」と説明されても、実際に使う文字の条件でコントラスト比が足りるとは限りません。丸めた表示値だけで判定しないことも大切です。

ここでは、単色の不透明なsRGB色を使う通常サイズの文字を対象に、色ペアの計算と確認表を作ります。色と用途は説明用の例です。ブラウザで実際に使われる色、画面の見え方、利用者の読みやすさを測定した結果ではありません。

目次

文字色と背景色を、実際に使う組として集める

最初に、要素名、文字色、背景色、文字サイズ・太さ、表示状態、色の取得元を記録します。同じ文字色でも、白いカード、灰色の背景、ダークモードでは比率が変わります。hoverやfocusなどで色が変わるなら、その状態も別の行にします。

AIへスクリーンショットだけを見せて色を確定させるより、元のCSSやブラウザが適用している指定を確認します。今回の計算例は、前景・背景とも不透明、背景は均一、文字は通常サイズという前提です。透過、画像、グラデーション、混色、別の色空間がある場合は、この二色だけの計算へ押し込めません。

表は横にスクロールできます

確認する項目この例の前提
文字通常の本文、16px、通常の太さ
色6桁の#RRGGBBで表すsRGB
透明度前景・背景とも不透明
背景一様な白#ffffff
状態通常表示。別状態は別途確認

この前提を確認できない実画面は「未確認」に残します。変数名がtext-mutedだから薄い灰色、背景指定が見つからないから白、という推測では表を埋めないでください。

通常文字の基準と、対象外の条件を分ける

WCAG 2.2の達成基準1.4.3は、通常の文字と背景について少なくとも4.5:1を求めます。大きな文字は3:1ですが、サイズなどの適用条件があります。ロゴや非アクティブな部品などにも例外があるため、対象を決めず一律に同じ判定を付けません。今回の例は通常本文として4.5:1と比較します。W3C：Contrast (Minimum)（新しいタブで開く）

同資料は、計算結果を丸めずに基準値と比べることも説明しています。例えば4.499:1は4.5:1へ届きません。画面に小数1桁で4.5と表示されたことだけでは、基準以上と判定できない場合があります。

これは文字の色ペアについての確認です。アイコン、枠線、フォーカス、操作、読み上げなどを含むサイト全体のアクセシビリティ評価を終えたことにはなりません。

sRGBの相対輝度から、比率を計算する

W3Cの手法G18では、色の相対輝度を求め、明るい側をL1、暗い側をL2として、（L1＋0.05）÷（L2＋0.05）で比率を計算します。RGBの値をそのまま平均するのではなく、各チャンネルを線形化して重み付けします。W3C：手法G18（新しいタブで開く）

次は6桁の不透明sRGB色だけを受け取る計算例です。#fffのような省略形、rgba、CSS変数、別の色空間を解決する処理は含みません。それらがCSSとして無効という意味ではなく、この例の入力範囲から外しています。

function luminance(hex) {
  if (!/^#[0-9a-f]{6}$/i.test(hex)) {
    throw new Error("この例は6桁の#RRGGBBだけを扱います");
  }
  const channels = [1, 3, 5].map(i =>
    parseInt(hex.slice(i, i + 2), 16) / 255
  );
  const linear = channels.map(c =>
    c <= 0.04045 ? c / 12.92 : ((c + 0.055) / 1.055) ** 2.4
  );
  return 0.2126 * linear[0] + 0.7152 * linear[1] + 0.0722 * linear[2];
}
function contrastRatio(foreground, background) {
  const a = luminance(foreground);
  const b = luminance(background);
  return (Math.max(a, b) + 0.05) / (Math.min(a, b) + 0.05);
}
const ratio = contrastRatio("#777777", "#ffffff");
console.log({ ratio, meetsNormalTextAA: ratio >= 4.5 });

このコードが調べるのは、渡した二色の数値上の比率です。実際の要素がその二色で表示されるか、透過がないか、通常文字として評価してよいかは確認しません。AIが書いた別の計算式を使う場合も、色の入力範囲と計算方法を確認してください。

白背景の灰色を、丸め前の値で比べる

以下は上の前提で計算する例です。表示用の比率は小数6桁に丸めていますが、判定は丸め前の値と4.5を比較します。

表は横にスクロールできます

文字色背景色比率の表示例通常文字の4.5以上か
#000000#ffffff21.000000:1以上
#767676#ffffff4.542225:1以上
#777777#ffffff4.478089:1未満
#949494#ffffff3.033470:1未満

#777777は小数1桁なら4.5と表示されますが、元の比率は約4.478で、通常文字の4.5へ届きません。AIが「4.5なので問題なし」と返した場合は、元の計算値と判定の順序を見直します。

#767676はこの白背景との組では4.5以上です。ただし、これをあらゆる背景や状態で使える色として登録するわけではありません。背景が変わったら、色ペアごとに計算し直します。この例の16pxの文字へ、大きな文字向けの3:1を都合よく当てはめることもしません。

AIへは、色名でなく値と判定条件を渡す

次の文字色・背景色の組を、通常サイズの本文として確認してください。
色は不透明な6桁sRGB、背景は単色とします。
入力：要素名｜文字色｜背景色｜文字サイズ・太さ｜表示状態｜色の取得元。
出力：元の色ペア｜計算方法｜丸め前の比率｜表示用比率｜4.5以上か｜未確認事項。
表示用の丸め値で合否を決めないでください。
実際のCSSや適用色が不明なら、推測せず未確認にしてください。
透過、画像・グラデーション背景、別の色空間を、この二色の計算だけで確認済みにしないでください。
色の修正案を出す場合は、元の色と変更案を分け、背景と状態を同じ条件で再計算してください。
この一項目の確認だけで、ページ全体がWCAGへ適合したと書かないでください。
実際の画面を変更せず、確認表と修正候補までにしてください。

出力後は、元の色、比率、比較した基準を照合します。AIの説明文を別のAIに聞いて一致しただけでは、独立した数値検証になりません。計算コードや確認ツールで値を確かめ、どの色ペアを調べたかを残します。

修正案は、色ペアと状態を保って再確認する

文字を暗くする、背景を明るくするなどの案を作ったら、元の組と変更後の組を別の行に置きます。共通の色変数を変える場合は、その変数を使う別の背景や状態にも影響するかを確認します。

例えば白いカードでは比率が上がっても、別の濃い背景に同じ文字色を使う場所では結果が変わります。通常表示だけでなく、hover、focus、選択中など、実際に文字が表示される状態を調べます。非アクティブな状態を通常表示の代わりに評価しないでください。

修正した色が実際のCSSへ反映されたか、文字が読めるか、操作やフォーカスの表示が保たれるかは、実画面で別に確認します。色ペアの計算で基準以上だったことを、描画や利用者の読みやすさまで実測した結果として扱わないようにします。

v0で生成したReactコードへ配色を反映する場合は、生成コードを編集するときのポイントで、対象のスタイルと影響する画面の差分を確認してください。今回の成果物は、配色の好みを決める表ではなく、入力した色ペアと判定根拠を追える確認表です。

参考資料

資料の確認日：2026年10月20日。対象は不透明な単色sRGBの文字色・背景色の計算例です。実際のCSS適用色、ブラウザ描画、操作、利用者の読みやすさ、ページ全体の適合性は検証していません。

質問から自分に合うAIを探す