コントラスト比の調べ方｜WCAG 2.2の基準・透過背景・判定手順

Webページや資料の文字が読めるか確認する人は、対象の文字サイズ、文字色、実際の背景色をそろえます。コントラストチェッカーへ#767676と#ffffffを入れると4.54:1と表示され、通常文字のAAは合格です。適用する対象と条件は先に決めてください。

WCAG 2.2のAA・AAAを対象別に選ぶ

CSSの換算は1pt＝4/3pxなので18pt＝24px、14pt＝約18.67pxです。和文などでは同等の大きさや実際の書体・太さも確認します。入力欄のプレースホルダーやホバー時に読む文字も、読ませる情報として検査します。

白背景の数値例と丸め前の判定

4.499を4.5へ丸めて合格にはしません。表示する小数桁数と判定に使う元の値を分け、ツールの通常文字AAの欄を読みます。色の前後を入れ替えても比率は同じです。

相対輝度から比率を求める手順

8bit sRGBの各成分を255で割ってcとします。c≤0.04045ならc/12.92、それ以外なら((c＋0.055)/1.055)^2.4で線形化します。線形化後のR・G・Bに対し、相対輝度L＝0.2126R＋0.7152G＋0.0722B。明るい方をL1、暗い方をL2として、比率は(L1＋0.05)/(L2＋0.05)です。

黒はL=0、白はL=1なので1.05/0.05＝21です。HSLの明度Lとは別の計算です。数値表記の対応は色変換ガイドと色変換ツールで確認できます。

透過・画像・ダーク表示のチェック表

チェッカーは#RGB・#RRGGBBを受け付け、透明度・画像・CSS全体は解析しません。合成の考え方は[色変換ガイド](/blog/color-conversion-guide/)に示しています。文字の輪郭のアンチエイリアスを拾うのではなく、指定色と合成条件を確認します。入力エラーが出た場合はコードを直してから判定を読みます。

色の調整と、色以外の手掛かりを組み合わせる

白文字と#3b82f6の通常文字AAは未達ですが、背景を#1d4ed8へ変更すると約6.70:1です。候補は配色ガイドとパレット生成で作れます。色を変えたら、ホバーやフォーカス時も再計測します。リンクには下線、エラーには説明文とアイコンを添えてください。

便利ツールカテゴリからも開けます。お気に入りに登録すると、同じブラウザのマイツールから再訪できます。

Tools Hub編集部が2026年11月8日にWCAGの条件、比率の例、入力と入れ替え操作を照合しました。このチェッカーの文字コントラスト判定は、ページ全体のWCAG適合を判定するための検査の一部です。

よくある質問

4.50:1と表示されれば通常文字のAAに合格ですか？

表示だけでは決められません。#6e7978と白は約4.4976:1で、表示は4.50:1に丸められますが通常文字AAは不合格です。ツールの判定欄は丸め前の値を使います。

大きい文字は何pxからですか？

18pt以上、または14pt以上の太字が基準です。CSSでは18pt＝24px、14pt＝約18.67px。フォントの実際の太さや同等の大きさも考慮します。

薄いプレースホルダーは対象外ですか？

入力の手掛かりとして読ませるプレースホルダーも対象になります。ロゴや純粋な装飾、非アクティブな要素などの例外とは分けて判断します。

半透明のカードはどの背景色を入力しますか？

実際に合成された背景色を使います。背景画像やスクロール位置で変わる場合は、読みにくい場所と各表示状態を個別に確認してください。ツール自体は不透明な3・6桁HEXを比較します。

@misc{tools_hub_contrast_ratio_guide_2026,
  author = {{Tools Hub編集部}},
  title = {コントラスト比の調べ方｜WCAG 2.2の基準・透過背景・判定手順},
  year = {2026},
  url = {https://the-tools-hub.net/blog/contrast-ratio-guide/}
}