コントラスト比チェック
文字色と背景色のコントラスト比を計算し、WCAG 2.1のAA・AAA基準を満たすか判定します。 実際の見え方をプレビューしながら確認できるので、Webサイトやスライドの配色チェックに使えます。
大きい文字（24px）のサンプル
通常の文字（16px）のサンプルです。この文章が無理なく読めるかを確認してください。
小さい文字（13px）のサンプル。注釈などに使われる大きさです。
WCAG 2.1 の基準では、通常の文字は 4.5:1 以上（AA）、大きい文字と図形は 3:1 以上（AA）が求められます。本文にそのまま使える組み合わせです。
使い方
文字色と背景色を指定すると、コントラスト比と判定がすぐに出ます。色はカラーピッカーのほか、 「#3d5afe」「3d5afe」「rgb(61,90,254)」「61,90,254」のいずれの書き方でも入力できます。 プレビューでは3種類の文字サイズを並べているので、実際の読みやすさも確かめられます。
コントラスト比とは
2つの色の明るさの差を1〜21の数値で表したものです。黒と白の組み合わせが最大の21:1、同じ色どうしが最小の1:1になります。 単純な明度の差ではなく、人の目が緑を明るく、青を暗く感じることを踏まえて重み付けした相対輝度から計算します。
| 相対輝度 | 0.2126×R + 0.7152×G + 0.0722×B（各成分を補正した値） |
|---|---|
| コントラスト比 | (明るいほうの輝度 + 0.05) ÷ (暗いほうの輝度 + 0.05) |
緑の係数が大きいのは、人の目が緑の波長に最も敏感なためです。そのため 「同じ濃さに見える青と緑」でも、コントラスト比はまったく違う値になります。
WCAGの基準
| 水準 | 必要な比 | 対象 |
|---|---|---|
| AA（通常の文字） | 4.5:1 以上 | 本文・ボタンのラベルなど大半の文字 |
| AA（大きい文字） | 3:1 以上 | 24px以上、または18.66px以上の太字 |
| AA（図形・境界線） | 3:1 以上 | アイコン・入力欄の枠線・グラフの要素 |
| AAA（通常の文字） | 7:1 以上 | より高い水準を目指す場合の本文 |
| AAA（大きい文字） | 4.5:1 以上 | より高い水準を目指す場合の見出し |
日本の「ウェブアクセシビリティ」に関する規格（JIS X 8341-3）もWCAGを基にしており、 公共機関のサイトではAA水準が求められることが一般的です。
配色の例
| 文字色 | 背景色 | 比 | 備考 |
|---|---|---|---|
| #000000 | #ffffff | 21.00 : 1 | 最大値。読みやすさは十分 |
| #3d5afe | #ffffff | 5.13 : 1 | このサイトのリンク色。本文でもAA合格 |
| #767676 | #ffffff | 4.54 : 1 | グレー文字がAAを満たす境目あたり |
| #999999 | #ffffff | 2.85 : 1 | 薄いグレー。通常の文字には不足 |
| #ffffff | #3d5afe | 5.13 : 1 | 青背景に白文字。組み合わせは同じ比 |
| #ffff00 | #ffffff | 1.07 : 1 | 黄色に白。ほとんど読めない |
灰色の文字は要注意です。白背景では #767676 あたりがAAを満たす境目で、 これより薄くすると本文には使えません。「おしゃれに見えるから」と薄くしていくと、基準を割りやすい部分です。
配色を直すときのコツ
- 文字を濃くするより背景を薄く — 背景の色味を保ちたい場合、背景を白に近づけるほうが印象を変えずに比を上げられます。
- 薄い文字は「大きく・太く」で救う — 24px以上か、18.66px以上の太字なら基準は3:1に緩みます。
- 画像の上の文字には帯を敷く — 写真の上の文字は場所によって比が変わります。半透明の帯を入れると安定します。
- 色だけで情報を伝えない — 「赤字がエラー」のような伝え方は、色を判別しにくい人に届きません。文言やアイコンも添えます。
使うときの注意
- この判定は文字色と背景色の関係だけを見ています。実際の読みやすさは字体・字間・画面の明るさにも左右されます。
- ロゴ・装飾目的の文字・無効化された部品は、WCAGの基準の対象外とされています。
- 半透明の色（アルファ値つき）には対応していません。重ねた結果の色を計算してから入力してください。
- 基準を満たしていても、細いフォントでは読みにくいことがあります。プレビューで必ず目視してください。
よくある質問
コントラスト比はどう計算しますか？
2つの色の明るさ（相対輝度）を求め、(明るいほう + 0.05) ÷ (暗いほう + 0.05) で計算します。値は1（同じ色）から21（黒と白）の範囲になります。単純な明度の差ではなく、人の目の感じ方に合わせて重み付けした計算です。
AAとAAAの違いは何ですか？
WCAGが定める達成度合いの水準です。AAは多くのガイドラインや公共調達で求められる標準的な水準（通常の文字で4.5:1以上）、AAAはさらに高い水準（7:1以上）です。まずはAAを満たすことを目標にしてください。
「大きい文字」とは何ptからですか？
18pt（約24px）以上、または14pt（約18.66px）以上の太字です。大きい文字は形が判別しやすいため、基準が3:1に緩和されています。
アイコンやボタンの枠線にも基準はありますか？
あります。操作できる部品や、情報を伝える図形は3:1以上が求められます（WCAG 2.1の達成基準1.4.11）。入力欄の枠線やグラフの線も対象です。
基準を満たせばそれで十分ですか？
最低限の目安と考えてください。実際の見え方は、フォントの細さ・画面の明るさ・周囲の環境・年齢によっても変わります。基準ぎりぎりより、余裕をもった配色のほうが安心です。
入力した色は送信されますか？
いいえ。計算はすべてブラウザ内で行われ、入力した色が外部へ送信・保存されることはありません。
関連ツール
HEX・RGB・HSLの相互変換は カラーコード変換、画像や画面の縦横比は アスペクト比計算 をどうぞ。印刷物の寸法は 用紙サイズ早見、 文字量の確認は 文字数カウント が便利です。 相性のよい色の組み合わせを探すなら カラーパレット生成 をどうぞ。