色のコントラスト
テキストと背景色のコントラストをWCAG AA・AAAの基準で確認できます。
Readable sample text
WCAG contrast check preview
Ratio
17.74:1
AA normal
Pass
AA large
Pass
AAA normal
Pass
AAA large
Pass
関連ツール
よく一緒に使われる無料ツールです。すべてブラウザ上で動作します。
このツールの使い方
- テキストの 16 進数の色と背景の 16 進数の色を入力します。
- プレビューとコントラスト比を確認します。
- WCAG AA および AAA の合否結果を確認します。
よくある質問
コントラスト比とは何ですか?
コントラスト比は2色(通常テキストとその背景)の輝度の差を測定し、1:1(同一で読めない)から21:1(純黒と純白)までの数値で表されます。比率が高いほどテキストが読みやすく、低視力の方、高齢の方、または明るい日光の下でのスマートフォン画面を使用する方に重要です。これはアクセシビリティガイドラインや監査がテキストが読みやすいかどうかを判断するために使用する同じ測定値です。
これは誰が使うべきですか?
ウェブサイトのテキストと背景のカラーパレットを選ぶデザイナー、ローンチ前にアクセシビリティ監査を行う開発者、できるだけ多くの訪問者が読める状態に保つ必要があるボタンやバナーの色を選ぶマーケター。
WCAG AAとはどういう意味ですか?
AAはウェブコンテンツアクセシビリティガイドラインから広く使われるアクセシビリティ目標です。通常のテキストは少なくとも4.5:1のコントラスト比、大きなテキストは少なくとも3:1が必要です。
AAとAAAの違いは何ですか?
AAAはより厳格なレベルで、通常のテキストに少なくとも7:1、大きなテキストに4.5:1が必要です。ほとんどのプロジェクトはAAを目標とし、AAAはアクセシビリティが特に重要なコンテンツのために使われます。
どの16進形式が機能しますか?
テキストと背景のフィールドの両方で、先頭のハッシュ記号あり・なしの3桁または6桁の16進カラーが使えます。
何かアップロードされますか?
いいえ。16進カラーはすべてブラウザ内で確認されます。
合格するとアクセシビリティが保証されますか?
いいえ。コントラスト比は重要な要因の1つですが、読みやすいフォントサイズ、十分なスペーシング、意味を伝えるために色だけに依存しないことも重要です。
ブラウザ内でローカルに処理されます。ファイルが当社のサーバーにアップロードされることはありません。