WCAG カラーコントラスト比計算機

前景色と背景色の間の WCAG 2.1 相対コントラスト比を計算し、通常テキストと大きいテキストの AA および AAA 準拠を確認します。

前景色（16 進）

背景色（16 進）

WCAG カラーコントラスト比計算機の使い方

前景色を 16 進コード（#rrggbb）で入力してください。
背景色を 16 進コードで入力してください。
「計算する」をクリックすると、コントラスト比と AA/AAA の判定結果が表示されます。

使用例

•ブランディング時のデザイントークンのレビュー。
•既存 UI のアクセシビリティ監査。
•テキストと画像の合成のコントラスト確認。

計算式

Ratio = (L1 + 0.05) / (L2 + 0.05) where L1 is the lighter and L2 the darker relative luminance. Simplified luminance: 0.2126·R + 0.7152·G + 0.0722·B on a 0–1 sRGB scale.

よくある質問

AA が最低基準とされる理由は何ですか？

WCAG 2.1 レベル AA は、ほとんどの規制機関が採用している目標です（EN 301 549、Section 508、ADA 判例法）。AAA は長文コンテンツの理想的な基準です。

大きいテキストの定義は何ですか？

大きいテキストとは、通常ウェイトで 18 pt（24 px）以上、または太字で 14 pt（18.66 px）以上です。それ以外は通常テキストとなり、4.5:1 を満たす必要があります。

簡略化された輝度は WCAG に準拠した精度を持ちますか？

ほとんどの sRGB ペアでは、完全な式と同じ合否判定に丸められます。閾値付近のエッジケースでは、公式の WCAG 式または新しいプロジェクト向けの APCA でクロスチェックしてください。