コントラスト比チェック
そもそも読めるのかどうか。
例を読み込むと入力と設定が一時的に変わります。元の内容に戻せます。
0文字
出力
上に貼り付けるか入力すると、ここに結果が表示されます。
ファイルは端末の外に出ません
このツールはすべてブラウザ内で動作します。貼り付けた内容は端末内で処理され、サーバーには送信されないため、トークンや鍵、未公開の文章でも安心して使えます。
使用例
例：オレンジのボタンに白い文字は読める？ お店のサイトの配色をまとめて判定
地域の洋菓子店のサイトで、予約ボタンはオレンジ（#f39800）に白い文字、フッターの住所は白地に薄いグレー（#999999）です。リニューアルの前に、今の配色と直す候補を1行に1組ずつ、文字色を先にして貼り付けます。
- まず比率を見ます。白と #f39800 は2.26 : 1で、大きな文字の基準3 : 1にも届かず、すべての項目が「不合格」です。
- 文字を白のままにするなら、オレンジを濃くした #b45f00 で4.59 : 1。本文のAAを満たします。#d06d00（3.58 : 1）は大きな文字と枠線・アイコンだけ合格です。
- オレンジを変えたくないなら、文字を白から #333333 に替えると5.60 : 1で、本文のAAに合格します。
- フッターは #999999 が2.85 : 1で不合格、#767676 なら4.54 : 1で通ります。
| 入力 | コントラスト比 | 本文 AA（4.5） | 大きな文字 AA（3） |
|---|---|---|---|
| #ffffff #f39800 | 2.26 : 1 | 不合格 | 不合格 |
| #ffffff #d06d00 | 3.58 : 1 | 不合格 | 合格 |
| #ffffff #b45f00 | 4.59 : 1 | 合格 | 合格 |
| #333333 #f39800 | 5.60 : 1 | 合格 | 合格 |
| #999999 #ffffff | 2.85 : 1 | 不合格 | 不合格 |
| #767676 #ffffff | 4.54 : 1 | 合格 | 合格 |
ボタンは「オレンジのまま文字を #333333 に」か「白い文字のままオレンジを #b45f00 に」のどちらかでAAを満たします。どれも本文のAAA（7 : 1）には届きません。お店の色を残したいなら前者、白抜き文字のデザインを残したいなら後者です。
使い方
- 1行に1組ずつ、#333 on #fff のように入力します。カンマでもスラッシュでも空白でもかまいません。
- 色を1つだけ書いた場合は、上で指定した背景色と比べます。
- まず比率を見てください。ほかはすべてそこから決まります。
- 本文なら4.5が越えるべき数字です。
よくある質問
- AAとAAAは具体的に何を求めていますか。
- AAは本文に4.5対1、大きな文字に3対1を求めます。大きな文字とは24px、または太字の18.66px以上です。AAAはそれぞれ7対1と4.5対1。境界線・アイコン・入力欄の枠は3対1です。
- このグレーが落ちるのはなぜですか。
- 白地に #777 は4.48対1で、AAに0.02足りません。よくある惜しい失敗であり、人がわざわざ確かめる理由でもあります。選んだ本人には問題なく見え、相当数の人には実際に読みにくいからです。#757575 なら通ります。
- どちらの色を先に書くかで変わりますか。
- 不透明な色なら変わりません。比率は対称なので、文字色と背景色を入れ替えても同じ数字になります。半透明の色（#33333380 や rgba(…)）があると変わります。先に書いた色を後の色の上に重ね、半透明の背景色は白いページの上に重ねて判定するので、文字色を先に書いてください。
- 比率が通れば「アクセシブル」と言えますか。
- 言えません。コントラストは数ある要件のひとつにすぎず、フォーカス表示、押せる大きさ、動き、色だけで意味を伝えていないかについては何も語りません。最低ラインであって、合格判定ではありません。
- 「大きな文字」は何ポイントのことですか。
- WCAGの定義では18ポイント以上、または太字で14ポイント以上です。画面のCSSでは24pxと18.66pxにあたり、判定にもこの数字を表示しています。見出しや大きなボタンの文字がこれ以上なら、AAは3 : 1で足ります。
- 色はどんな書き方で入力できますか。
- #333 や #333333 のような16進数、rgb(51,51,51)、hsl(0,0%,20%) が使えます。2色の間は空白でも「on」でも「/」でもかまいません。white や orange のような色の名前は読めないので、その行は「色として読めません」と表示されます。
- 入力した内容はどこかに送られますか。
- いいえ。ブラウザの中で動くので、貼り付けた内容はお使いのパソコンから出ません。