このページにはアフィリエイト広告が含まれます。

Webアクセシビリティ配色チェッカー&コントラスト自動補正

文字色と背景色からWCAG 2.1基準比率を算出。基準未達時は色相を保ったまま合格する最短の明度調整色を即座に逆算提案します。

配色設定
判定基準
通常テキスト (AA) -
4.5:1 以上
大テキスト/UI (AA) -
3.0:1 以上
通常テキスト (AAA) -
7.0:1 以上
大テキスト (AAA) -
4.5:1 以上
4.02 : 1
WCAG 2.1 相対輝度コントラスト比
アクセシビリティ表示プレビュー
Webコンテンツ JIS X 8341-3 / WCAG 2.1 ガイドラインでは、弱視者や高齢者、屋外等の低コントラスト環境でも判読できるよう適切な明度差が求められます。
Tag / Badge
AA基準 (4.5:1) を満たす自動補正案(色相維持)
色覚多様性シミュレーション

P型(1型・赤色弱)、D型(2型・緑色弱)、T型(3型・青色弱)、グレースケール環境下での文字と背景のコントラストシミュレーションです。

WCAG 2.1 コントラスト基準の定義
対象要素 レベルAA(推奨標準) レベルAAA(高度基準)
通常テキスト(18pt未満、または太字14pt未満) 4.5 : 1 以上 7.0 : 1 以上
大テキスト(18pt以上、または太字14pt以上) 3.0 : 1 以上 4.5 : 1 以上
UIコンポーネント(ボタン枠線・フォーム入力枠・重要アイコン) 3.0 : 1 以上 規定なし
[ 広告 ]

Webアクセシビリティ・UI配色実務 参考書籍

実務でのJIS規格準拠・カラーユニバーサルデザイン実装に直結する専門書籍です。