カラーコントラストチェッカー
前景色と背景色のコントラスト比をWCAG 2.1のAA・AAAレベルで検証します。
Contrast ratio
Normal text AA
Normal text AAA
Large text AA
Large text AAA
UI components AA
このツールを使う理由
032色を入力すると、WCAG 2.1のコントラスト比と、通常テキスト・大テキスト・非テキストUIコンポーネントの合否が即座に表示されます。
Color Contrast Checkerは前景色と背景色のルミナンスベースのコントラスト比を正確に計算します。
通常テキスト（4.5:1・7:1）・大テキスト（3:1・4.5:1）・非テキストUI（3:1）に対するWCAG 2.1のAA・AAAの適合状況をフラグで示します。
使い方
03コピー前のクイックチェック
03Confirm the input is the format you intended.
Scan the result before using it in a document, URL, config, or message.
Copy only the output you need.
よくある質問
03
AAとAAAの違いは何ですか？
AAはほとんどのアクセシビリティ規制で要求される基準です。AAAはより厳格な強化レベルです。通常テキストではAAが4.5:1・AAAが7:1、大テキストではAAが3:1・AAAが4.5:1です。
大テキストとは何ですか？
WCAGでは、18pt（24px）以上の標準フォント、または14pt（18.66px）以上のボールドフォントを大テキストと定義しています。
コントラスト比はどのように計算されますか？
WCAG 2.1の計算式に従います。各色をsRGB相対輝度に変換し、(L1 + 0.05) / (L2 + 0.05)を計算します。ここでL1は明るい方の色です。比率は1:1〜21:1の範囲です。
関連ツール
01カラーコンバーター→
Hex・RGB・HSL・OKLCHの間で色を変換し、ライブスウォッチと色相スライダーで確認できます。