カラーコントラストチェッカー

このツールについて

コントラストチェッカーは、WCAG 2.1の相対輝度式を使用して、前景色（テキスト）と背景色のコントラスト比を計算します。

WCAG 2.1はAA（通常4.5:1、大1テキスト3:1）とAAA（通常7:1、大テキスト4.5:1）の2つのレベルを定義しています。

使い方

1. カラーピッカーまたはhexコードで前景色と背景色を選択します。
2. プレビューで通常・大サイズのテキストの見え方を確認します。
3. コントラスト比とWCAGの合否が即座に更新されます。
4. サンプルペアで一般的なアクセシビリティパターンを試します。

活用事例

UIデザイナーはボタンのラベルや本文テキストがWCAG基準を満たすか確認します。フロントエンド開発者はデザインシステムでテキストと背景の組み合わせを確認します。

よくある質問

• "大テキスト"とは？ — WCAGでは少なくとも18pt（24px）の通常、または14pt（約18.67px）の太字を大テキストと定義しています。
• 透明やrgbaに対応していますか？ — いいえ。このツールは単色のhexのみ対応です。アルファ合成カラーは先に背景に合成してください。
• どのWCAGレベルを目指すべき？ — AAはほとんどの公開Webサイトに推奨される最低基準です。AAAはより高い可読性を提供します。
• 4.5:1は常に十分ですか？ — 4.5:1はWCAG AAを満たしますが、重度の視覚障害がある方にはより高い比率が役立つ場合があります。