色のコントラストチェック
ふたつの色のコントラスト比を計算し、Webアクセシビリティの基準を満たしているか即座に判定します。
▶このツールについて
前景色と背景色のコントラスト比を判定し、WCAG 2.1のAA/AAA基準をクリアしているか一目で確認できるツールです。アクセシビリティに配慮したUIデザインや、テキストの可読性確保に役立ちます。
「この薄いグレーのテキスト、オシャレだけどちょっと読みにくいかも…」──デザインにおいて色選びと可読性のバランスは永遠の課題です。WCAGの基準（4.5:1など）を満たしているか感覚ではなく数値で明示することで、誰にとっても見やすいサイト設計が可能になります。カラーコードを入れるだけでアクセシビリティの適合状況が合格・不合格で表示されるので、デザインレビュー前の確認に最適です。
ツール操作
Aa 123 見本
コントラスト比 —
WCAG AA（通常テキスト 4.5:1） —
WCAG AA（大きなテキスト 3:1） —
WCAG AAA（通常テキスト 7:1） —
使い方
- 前景色と背景色をカラーピッカーで選択します
- コントラスト比が即座に表示されます
- WCAG 2.1のAA/AAA基準の適合状況を確認できます
いつ使うか
アクセシビリティ対応、UIの色選定、テキストの可読性確保、WCAG準拠の確認に。
使用例
白(#fff) on 黒(#000) = 21:1、グレー(#666) on 白(#fff) = 5.74:1。
よくある質問
WCAGとは？
Web Content Accessibility Guidelinesの略。Webコンテンツのアクセシビリティに関する国際標準ガイドラインです。W3Cが策定し、多くの国で法的要件の参考にされています。
コントラスト比の目安は？
WCAG 2.1では、通常テキストで4.5:1以上（AA）、7:1以上（AAA）。大きなテキスト（18px以上または14px太字）では3:1以上（AA）、4.5:1以上（AAA）が推奨されています。
AA基準とAAA基準の違いは？
AAは最低限のアクセシビリティ基準。AAAはより厳格で、コントラスト比7:1以上などが求められます。多くのサイトはAA準拠を目標にします。
コントラスト比の計算方法は？
(L1+0.05)/(L2+0.05)で計算。L1は明るい色の相対輝度、L2は暗い色の相対輝度。21:1が最大（白と黒）、1:1が最小（同色）です。
色コントラストチェックツールの使い方は？
前景色と背景色を選択するだけで、コントラスト比とWCAG 2.1のAA/AAA適合状況が即座に表示されます。
コントラスト比4.5:1とは？
WCAG AAの通常テキスト基準。明るい色と暗い色の輝度比が4.5以上必要。このツールで確認できます。
アクセシビリティで色を選ぶには？
このツールで前景・背景の組み合わせを試し、AA以上になる色を選択。デザインの段階で確認が重要です。
グレー on 白のコントラストは？
#666 on #fff は約5.74:1でAA適合。#999は約2.85:1で不適合。このツールで確認できます。
大きなテキストの基準は？
18px以上、または14px以上で太字。コントラスト比3:1以上でAA適合。このツールで大きなテキストの適合も確認できます。
色のコントラストを改善するには？
背景を濃くする、文字を濃くする、フォントを太くする。このツールで組み合わせを試して適合する色を探します。
関連ツール
色・デザインセット