コントラストチェッカー
テキストと背景色のコントラスト比をチェックし、アクセシビリティ基準を満たしているか確認できるツールです。
コントラスト比
21.00:1
WCAG 2.1/2.2 では、テキストのコントラスト比について以下の基準が定められています：
通常テキスト
AA レベル (4.5:1)
AAA レベル (7:1)
大きいテキスト
18pt以上、または太字14pt以上
AA レベル (3:1)
AAA レベル (4.5:1)
プレビュー
Aa
この文字は読みやすいですか？
コントラスト比の解説
コントラスト比は、前景色（テキスト）と背景色の明るさの差を数値化したものです。1:1（差がない）から21:1（黒と白）の範囲で表されます。WCAG 2.1では、通常のテキストはAA基準で4.5:1以上、AAA基準で7:1以上のコントラスト比が必要です。
適切なコントラスト比を確保することは、視覚障害のあるユーザーを含むすべての人がコンテンツを読みやすくするために重要です。このツールを使って、あなたのデザインがアクセシビリティ基準を満たしているか確認しましょう。
コントラストチェッカー主な機能
WCAG基準チェック
AA・AAAレベルのアクセシビリティ基準に対するコントラスト比を自動評価します。
リアルタイム計算
色を変更すると即座にコントラスト比が再計算され、視覚的にフィードバックが得られます。
アクセシビリティ対応
誰もが使いやすいデザインを実現するための重要なツールです。
デザインのヒント
基準を満たす色の組み合わせを見つけるためのガイダンスを提供します。
コントラストチェッカーの使用シーン
ウェブデザイン
ウェブサイトやアプリのテキストと背景色のコントラストをチェックし、すべてのユーザーが読みやすいデザインを確保します。
プレゼンテーション
スライドのテキストと背景色のコントラストを確認し、会議室や講堂などの様々な環境で読みやすいプレゼンテーションを作成します。
印刷物
パンフレットやポスターなどの印刷物のデザインにおいて、テキストと背景のコントラストを確認します。
ブランディング
企業のブランドカラーを使用する際に、テキストとの組み合わせがアクセシビリティ基準を満たしているか確認します。
コントラストチェッカーの使い方
- 「前景色（テキスト）」の入力フィールドで、テキストの色を設定します。カラーピッカーを使うか、HEX値を直接入力できます。
- 「背景色」の入力フィールドで、背景の色を設定します。同様にカラーピッカーまたはHEX値で指定できます。
- 設定した色の組み合わせが、自動的にコントラスト比として表示されます。