コンテンツへスキップ
Color Contrast Checker
前景色と背景色のコントラスト比を計算し、WCAGのAA・AAA基準を満たすか確認します。
コントラストの見え方サンプル
概要
- 前景色（文字色）と背景色のコントラスト比を、WCAG 2.1で定義された計算式に基づいて算出するツールです。
- 算出したコントラスト比が、通常テキスト・大きいテキストそれぞれについてAA基準（最低限）・AAA基準（推奨）を満たすかを判定します。
- #RRGGBB・rgb(r, g, b)・hsl(h, s%, l%)の各形式に対応しています。
使い方
- 前景色（文字色）と背景色を入力します。
- 「確認する」ボタンをクリックします。
- コントラスト比と、通常テキスト・大きいテキストそれぞれのAA・AAA基準の合否が表示されます。
入力例・出力例
入力
前景色: #000000, 背景色: #FFFFFF
出力
21.00:1（AA・AAAともに合格）
利用シーン
- Webサイトのテキストと背景色の組み合わせが、アクセシビリティ基準を満たしているか確認する
- デザインカンプの配色案が、視覚的に読みやすいコントラストになっているか検証する
- 既存サイトの色をリニューアルする際、変更後もWCAG基準を満たすか確認する
よくある質問
AA基準とAAA基準の違いは何ですか？
AAは多くのWebサイトが満たすべき最低限の基準（通常テキスト4.5:1、大きいテキスト3:1）、AAAはより高いアクセシビリティを目指す推奨基準（通常テキスト7:1、大きいテキスト4.5:1）です。
「大きいテキスト」とはどのくらいのサイズを指しますか？
WCAGでは、18pt（24px相当）以上、または太字の場合は14pt（約18.66px）以上のテキストを「大きいテキスト」と定義しています。
透明度（アルファ値）を持つ色は正しく計算されますか？
rgba()・hsla()形式のアルファ値は無視され、背景と合成されていない状態のRGB値で計算されます。半透明の要素を扱う場合は、実際に合成された色で計算してください。
注意点
- 計算はすべてブラウザ内で完結し、入力した色の値が外部へ送信されることはありません。
- 本ツールはテキストと背景の単純な2色間のコントラストのみを計算します。グラデーションや画像を背景に使う場合は、実際の見た目で別途確認してください。