カラーコントラストチェッカー
前景色と背景色を指定して、WCAG 2.1 基準のコントラスト比をリアルタイムで確認できます。
前景色
HEX: #333333
RGB: 51, 51, 51
HSL: 0°, 0%, 20%
背景色
HEX: #FFFFFF
RGB: 255, 255, 255
HSL: 0°, 0%, 100%
コントラスト比
12.63 : 1
優秀
プレビュー
通常テキスト（14px）— The quick brown fox jumps over the lazy dog. 素早い茶色の狐が怠け者の犬を飛び越える。
大きいテキスト（24px bold）
大きいテキスト（18px bold）
WCAG 2.1 準拠チェック
| 対象 | レベル | 必要比率 | 判定 |
|---|---|---|---|
| 通常テキスト | AA | 4.5:1 | |
| 通常テキスト | AAA | 7:1 | |
| 大きいテキスト（18px bold / 24px以上） | AA | 3:1 | |
| 大きいテキスト（18px bold / 24px以上） | AAA | 4.5:1 | |
| UIコンポーネント・グラフィック | AA | 3:1 |
コントラスト比とは
コントラスト比は、前景色（テキスト）と背景色の明るさの差を数値化したものです。 WCAG（Web Content Accessibility Guidelines）2.1では、Webコンテンツのアクセシビリティを確保するために、 テキストと背景のコントラスト比に最低基準を設けています。
コントラスト比が低いと、視覚障害のあるユーザーや高齢者がテキストを読みにくくなります。 このツールを使えば、デザイン段階でコントラスト比を確認し、アクセシビリティに配慮した配色を選べます。
WCAG 2.1 コントラスト比の基準
| 対象 | AA（最低基準） | AAA（推奨基準） |
|---|---|---|
| 通常テキスト | 4.5:1 | 7:1 |
| 大きいテキスト（18px bold / 24px以上） | 3:1 | 4.5:1 |
| UIコンポーネント・グラフィック | 3:1 | — |
チェックできる項目
- コントラスト比（小数第2位まで表示）
- WCAG 2.1 AA / AAA レベルの合否判定
- 通常テキスト・大きいテキスト・UIコンポーネントの個別判定
- テキストプレビュー（実際の見え方を確認）
- カラーコード変換（HEX / RGB / HSL）
関連記事
よくある質問
- Q. WCAG 2.1のコントラスト基準とは？
- WCAG 2.1では、通常テキストはコントラスト比4.5:1以上（AA）、大きなテキスト（18px太字以上）は3:1以上が必要です。AAAレベルでは通常テキスト7:1以上、大きなテキスト4.5:1以上が求められます。
- Q. コントラスト比が低いとどうなりますか？
- 視覚障害者や高齢者にとってテキストが読みにくくなります。また、屋外でスマートフォンを使う際など、明るい環境でも読みづらくなります。アクセシビリティ基準を満たすことで、より多くの人が快適にコンテンツを利用できます。
- Q. UIデザインで推奨されるコントラスト比は？
- 最低でもWCAG AA基準（4.5:1）を満たすことが推奨されます。本文テキストはAA基準、見出しや大きなボタンはAA Large基準（3:1）を目安にしましょう。
関連ツール
開発者
Zeronova（ゼロノバ）
Product Manager / AI-Native Builder
19年以上のWeb/IT業界経験を持つPdMが、現場で本当に使えるツールを開発。登録不要・ブラウザだけで動作する無料ツールを93種類以上公開中。