コントラスト比チェッカーとは？
コントラスト比チェッカーとは、文字色と背景色の明るさの差（コントラスト比）を計算し、その組み合わせが読みやすいかどうかを判定するツールです。Webアクセシビリティのガイドライン「WCAG」では、文字と背景に十分なコントラストを確保することが求められており、本ツールでその基準を満たしているかを確認できます。
コントラスト比チェッカーの使い方
- 色を指定する文字色（前景）と背景色を、カラーピッカーまたはHEXコードで入力します。
- コントラスト比を確認するコントラスト比が計算され、AA・AAAそれぞれの基準（通常文字・大きい文字）への適合が表示されます。
- 見え方をプレビューする下部のプレビューで、その色の組み合わせの実際の読みやすさを確認できます。「入れ替え」で前景と背景を反転できます。
WCAGの基準について
WCAG 2.1では、通常サイズの文字はコントラスト比 4.5:1以上（レベルAA）、大きい文字（およそ24px以上、または太字18.66px以上）は 3:1以上 が求められます。より高いレベルAAAでは、通常文字7:1・大きい文字4.5:1が基準です。数値が大きいほど、視力の弱い方や屋外など明るい環境でも読みやすくなります。
こんな場面で使えます
Webサイトの配色チェック
本文やボタンの文字色が背景に対して読みやすいかを、公開前に確認できます。
アクセシビリティ対応
WCAG準拠が求められる案件で、色の組み合わせが基準を満たすか判定できます。
資料・スライドの配色
プレゼン資料やバナーの文字が見やすいかを、数値と見た目で確認できます。
よくある質問
「大きい文字」とはどのくらいのサイズですか？
WCAGでは、おおよそ24px（18ポイント）以上、または太字で18.66px（14ポイント）以上を「大きい文字」として扱います。この場合はやや低いコントラスト比でも基準を満たせます。
計算方法は何に基づいていますか？
WCAG 2.1が定める相対輝度（relative luminance）の計算式に基づいてコントラスト比を算出しています。
入力した色はサーバーに送信されますか？
いいえ、すべての計算はブラウザ内で行われ、外部に送信・保存されることはありません。