この記事の目次 開く・閉じる
今回の仕上がり
白い文字とミントの背景は1.38:1でした。「読みやすい例」で文字色を濃い緑へ変えると10.04:1になり、同じ背景でも違いを比べられました。下の画面はこの操作後の実スクリーンショットです。計算する作例もそのまま触れます。
こちらは実際に触れる作例です。 スクリーンショットで操作や音を代用したものではありません。音の作例も自動では鳴りません。
必要なものと操作順
ブラウザと、調べたい文字色・背景色の6桁の色コードを用意します。作例は無料で、登録やインストールは不要。写真、透明色、グラデーションの重なりはこの計算の対象外です。
- 作例の「淡い文字の例」を押し、白い文字とミント背景の見え方を見る。
- 結果欄の1.38:1と「基準未満」を確認する。
- 「読みやすい例」を押し、文字が濃い緑になったことと10.04:1を確認する。
- 自分の色を文字色・背景色へ入力し、「比率を計算」を押す。#と6桁の英数字で指定する。
- 白#ffffffと黒#000000を組み合わせ、21.00:1になるか試す。入力が不正なら案内が出る。
仕組みと使いどころ
色名ではなく、隣り合う2色を見る
「青なら読める」「白なら清潔」という色名だけでは、文字の読みやすさを決められません。同じ白でも、暗い背景と淡い背景では見え方が違います。まずは実際に文字の後ろにある色を調べます。
作例では入力した色を、見本の文字と背景へ同時に反映します。色コードを計算するだけの表にせず、使う大きさに近い文字を目で見て比べられるようにしました。
通常の文字と大きな文字は条件が違う
W3CのWCAG 2.2では、例外を除く通常の文字に4.5:1以上、大きな文字に3:1以上のコントラストを求めています。大きな文字の扱いにはサイズと太さの定義があるため、見出しという名前だけで3:1を使いません。
判定には丸める前の数値を使います。画面で4.50と見えても、元の値が4.499なら4.5には届きません。作例では計算値と表示用の2桁を分けています。
サイトでは組み合わせを残して使う
文字色、背景色、枠、選択中の色をセットで記録すると、別の欄で同じ組み合わせを使えます。色を増やすたびに個別調整するより、カテゴリーの色と本文用の色を分けると管理しやすくなります。
比率が高くても、極端に細い書体や小さい文字が読みやすくなるとは限りません。スマホ幅、文字の拡大、ホバー中、押せない状態も見てください。背景が写真なら、文字の背面に不透明な面を置く方法も候補です。
コードの要点
const channel = v => v <= 0.04045 ? v / 12.92 : ((v + 0.055) / 1.055) ** 2.4;
// RGBを0〜1へ変換した後に計算
const L = 0.2126 * channel(r) + 0.7152 * channel(g) + 0.0722 * channel(b);
const ratio = (Math.max(L1, L2) + 0.05) / (Math.min(L1, L2) + 0.05);
const passesNormalText = ratio >= 4.5; // 表示用に丸める前考え方を抜き出したコードです。L1とL2は2色の相対輝度。ZIPのdemo.jsには6桁の入力検証と見本の更新も含めています。透明度や画像の画素を分析する機能はありません。
自作のHTML・CSS・JavaScript・SVGはCC0です。ZIP内のREADMEと、共通のサンプル利用条件をご確認ください。
できたかの確認とよくあるつまずき
- 白と黒は21:1、同じ色同士は1:1になる。
- 白とミントは基準未満、濃い緑とミントは通常文字の基準以上になる。
- 間違った色コードを入力しても、例外で画面が止まらず案内が出る。
ここに注意。写真の平均色を背景色として計算しても、文字の直下が読める証拠にはなりません。文字が乗る範囲で確認します。
ここに注意。高い比率だけを目標にして、全部を強い色文字にすると要点が分かりにくくなることがあります。強調の意味と頻度も見直します。
出典と確認した範囲
作例の確認日：2026年10月3日。個別の条件と未確認範囲は以下の通りです。共通の検証方法も公開しています。
ブラウザで2色の計算、入力エラー、390px幅の表示を確認。実機の色再現、色覚の個別評価、写真や透明色、サイト全体のWCAG適合は未確認です。
W3C WAI：Contrast Minimum。比率、文字サイズの条件、相対輝度の計算と丸めの扱い。