入力
前景色 #000000 / 背景色 #ffffff
出力
コントラスト比 21:1、AA/AAA 合格
デザインツール
カラーコントラストチェッカー - WCAG AA/AAA
前景色と背景色のコントラスト比を WCAG 2.0 基準で計算し、通常文字と大きな文字に対する AA/AAA 判定を確認できます。アクセシブルな配色設計やフロントエンドの可読性確認に役立ちます。
コントラストWCAGアクセシビリティ
このツールをお気に入りに
お気に入りの保存方法がまだ選ばれていません。
クイック操作
このツールの URL をコピーするか、対応端末ではシステムの共有シートを開けます。
设计配色
颜色对比度检测
大标题 Large Text 正文文本 Normal Text 小字 Small Text
WCAG 对比度
对比度：-
AA 正文-
AA 大字-
AAA 正文-
AAA 大字-
已复制结果
利用シーン
- 本文やボタン文字の読みやすさを確認する
- デザイン案を WCAG 基準で検証する
- ブランドカラーを AA または AAA に達するまで調整する
使い方
- 前景色と背景色を設定する（ピッカーまたは HEX）
- コントラスト比と AA/AAA の結果を確認する
- 必要なら色を入れ替え、結果をコピーする
入出力サンプル
FAQ
AA と AAA の違いは何ですか？
AA は通常文字で 4.5:1 以上、大きな文字で 3:1 以上が必要です。AAA はより厳しく、通常文字で 7:1、大きな文字で 4.5:1 が必要です。
どの色入力に対応していますか？
計算には HEX 値を使用します。カラーピッカーを使うか、#RRGGBB を貼り付けてください。
ツール
関連ツール
近い用途の翻訳済みツールへ続けて進めます。
カラーフォーマット変換
カラーフォーマット変換 - HEX、RGB、HSL オンライン
HEX、RGB、HSL、HWB、CMYK、CSS 変数のあいだで色をブラウザ内変換できます。カラーピッカーとランダムカラー補助も備え、デザインの引き継ぎ、スタイルシート作業、ブランドカラー整合に役立ちます。
カラー HEX RGB
一括コントラストチェッカー
一括コントラストチェッカー - 複数ペアの WCAG 一括確認
複数の前景色 / 背景色ペアをまとめて WCAG contrast 判定できます。AA / AAA レベルと text preview を同時に確認でき、design system 監査、brand color 一括確認、accessibility review に向いています。
Contrast WCAG Accessibility
配色ハーモナイザー
配色ハーモナイザー - 定番配色ルール
基準色を 1 つ選び、complementary、analogous、triadic、tetradic、split-complementary、monochromatic などのルールで配色を生成できます。UI 上で見え方を確認し、brand や component 向けの CSS variable として書き出せます。
Palette Color Harmony