カラーコントラストチェッカー
二つのHEXカラーのあいだのWCAGコントラスト比を確認し、AAとAAAのアクセシビリティ基準を満たしているかを判定します。
このツールは役に立ちましたか？
ありがとうございます。ツールの改善に役立てます。
このツールの使い方
- 前景(テキスト)色と背景色をHEXコードで入力してください。
- 各色のWCAG相対輝度が計算されます。
- コントラスト比とAA・AAA基準の合否結果を確認してください。
二色がWCAG 2.1のコントラスト要件を満たすか確認します。通常テキスト(AA)の最低比率は4.5:1、最高基準のAAAは7:1です。
計算式
For each hex color, compute relative luminance L using the WCAG formula:L = 0.2126 × lin(R) + 0.7152 × lin(G) + 0.0722 × lin(B)
where lin(c) = c/12.92 if c ≤ 0.03928, else lin(c) = ((c + 0.055)/1.055)2.4.
Contrast ratio: ratio = (Llighter + 0.05) / (Ldarker + 0.05)
WCAG thresholds: AA normal text ≥ 4.5:1; AA large text ≥ 3.0:1; AAA normal text ≥ 7.0:1; AAA large text ≥ 4.5:1.
よくある質問
- WCAGコントラスト比とは何ですか?
- WCAG(Web Content Accessibility Guidelines)はコントラスト比の計算式を定義しています。範囲は1:1(コントラストなし)から21:1(白地に黒)です。通常の本文テキストはAA準拠に少なくとも4.5:1が必要です。
- 大きいテキストとは何を指しますか?
- 18pt(24px)以上、または太字14pt(約19px太字)以上のテキストを指します。大きいテキストはAAで3:1の比率のみで済みます。