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