カツプロ（ホーム）
カツプロチャットAI
カツプロ AI SEO
サイト診断
サーバーウォッチ
SNSアカウント診断
MoteRaku
デザインギャラリー
画像ツール
ファビコン生成
OGPの見え方チェック
文字の読みやすさチェック
カツプロPR
SNS文字数カウント
Instagram画像分割
QRコード作成
レビュー
名刺スキャン
見積書・請求書
電子印鑑作成文字の読みやすさチェック
← サービス一覧文字色と背景色を選ぶと、コントラスト比（明るさの差）をその場で計算し、 アクセシビリティの国際基準 WCAG 2.2 の AA・AAA に届くかを判定します。 届かないときは、近い色の候補を出します。 会員登録なし・無料でそのまま使えます。入力した色はあなたのブラウザ内だけで計算され、サーバーには送信されません。
書き方：#333・#333333・rgb(51, 51, 51)・rgb(51 51 51)（透明度つきの色は計算できません）
コントラスト比
| AA・ふつうの文字4.5:1 以上 | |
|---|---|
| AA・大きい文字3:1 以上 | |
| AA・アイコンやボタンの枠など3:1 以上（UI 部品・図） | |
| AAA・ふつうの文字7:1 以上 | |
| AAA・大きい文字4.5:1 以上 |
「大きい文字」は 18 ポイント以上、または太字で 14 ポイント以上の文字です。W3C の解説では、Web の大きさでおよそ 24px 以上、太字なら 約 18.5px 以上にあたります。 日本語は「同じ大きさに見える文字の大きさ」とだけ書かれていて、決まった数字はありません。迷ったら「ふつうの文字」の基準で見てください。
この色で見ると
見出しの文字（24px・太字）
本文の文字（16px）です。毎日読むお知らせや説明文が、この色の組み合わせで表示されるとこう見えます。
補足の文字（15px）。注意書きほど、しっかり読めることが大切です。
「塗りのボタン」は、文字色と背景色を逆にしたものです（比は同じ）。
近い色の候補
色み（色相）とあざやかさ（彩度）はそのままに、明るさだけを変えて、基準にぎりぎり届く色を探しています。押すとその色に入れ替わります。
使い方のコツ
- 本文はまず AA（4.5:1 以上）を満たすのが目安です。薄いグレーの文字は、見た目はおしゃれでも届いていないことがよくあります。
- 注意書き・免責・入力欄の説明こそ、本文と同じ濃さにしてください。小さく薄い文字は読まれません。
- アイコン・入力欄の枠・グラフの線など、文字ではない部品は 3:1 以上が基準です（文字の入ったボタンは、文字の基準も満たす必要があります）。
- 写真やグラデーションの上に文字を置くときは、いちばん明るい所（または暗い所）の色で測ってください。
- ブランドの色が基準に届かないときは、ブランド色は背景や枠に使い、文字には「近い色の候補」の濃い色を使うと、印象を変えずに読みやすくできます。
計算式と基準の出典
すべて W3C（Web の標準を決める団体）の公式資料です。WCAG 2.2 は 2024年12月12日の W3C 勧告版を参照しています。
- 相対輝度の式（sRGB、しきい値 0.04045）：WCAG 2.2「relative luminance」
https://www.w3.org/TR/WCAG22/#dfn-relative-luminance - コントラスト比 (L1 + 0.05) / (L2 + 0.05)、範囲 1:1〜21:1：WCAG 2.2「contrast ratio」
https://www.w3.org/TR/WCAG22/#dfn-contrast-ratio - 大きい文字（18 ポイント以上、太字 14 ポイント以上、CJK は同等の大きさ）：WCAG 2.2「large scale (text)」
https://www.w3.org/TR/WCAG22/#dfn-large-scale - AA・文字 4.5:1／大きい文字 3:1：達成基準 1.4.3 Contrast (Minimum)
https://www.w3.org/TR/WCAG22/#contrast-minimum - AAA・文字 7:1／大きい文字 4.5:1：達成基準 1.4.6 Contrast (Enhanced)
https://www.w3.org/TR/WCAG22/#contrast-enhanced - AA・UI 部品と図 3:1：達成基準 1.4.11 Non-text Contrast
https://www.w3.org/TR/WCAG22/#non-text-contrast - 約 18.5px・24px の目安と「計算した値を四捨五入しない（4.499:1 は 4.5:1 に届かない）」：Understanding SC 1.4.3
https://www.w3.org/WAI/WCAG22/Understanding/contrast-minimum.html
このツールは四捨五入せずに判定し、比の表示は小数第2位で切り捨てています（4.499 は「4.49:1・届かない」と出ます）。
よくある質問
- コントラスト比はどう計算していますか？
- W3C の WCAG 2.2 に書かれた式のとおりです。色ごとに「相対輝度」（真っ黒＝0、真っ白＝1）を求め、明るい方を L1、暗い方を L2 として (L1 + 0.05) / (L2 + 0.05) で出します。いちばん低いのは同じ色どうしの 1:1、いちばん高いのは黒と白の 21:1 です。
- AA と AAA はどちらを目指せばよいですか？
- ふつうのWebサイトは AA（ふつうの文字で 4.5:1 以上、大きい文字で 3:1 以上）がひとつの目安です。AAA（ふつうの文字で 7:1 以上、大きい文字で 4.5:1 以上）はさらに読みやすい水準で、本文を長く読ませるページや、年配の方が多く見るページで目指す価値があります。
- 4.49:1 は 4.5:1 に届いたことになりますか？
- なりません。W3C の解説では、計算した値を四捨五入せずに基準と比べるとされています（例：4.499:1 は 4.5:1 に届かない）。このツールも四捨五入せずに判定し、表示は小数第2位で切り捨てています。
- 入力した色はサーバーに送られますか？
- 送られません。計算はすべてお使いのブラウザ内で行っています。
ほかの無料ツール（登録なしで使えます）
画像
SNS
仕事・Web制作