現在のプレビュー状態:
一般色覚（C型 / Trichromacy）
三色型色覚者における自然な色彩の知覚です。
1
WCAG 1.4.1「色の使用」適合
フォーム入力 ＆ エラーバリデーション検証
色依存・NG
※P型やD型では赤枠とグレー枠の明度差が少なく、エラーに気づかないリスク大。
CUD推奨・完全適合
⚠️
⚠️ 正しいメールアドレス形式（@を含む）で入力してください。
2
赤緑の混同防止
ボタングループ ＆ 状態変化（Hover/Danger）
承認（緑） vs 削除（赤）の識別比較
P型・D型では両方とも黄土色に見える現象
CUD改善：アイコン ＋ 輪郭線（アウトライン）で形状差別化
3
データ可視化
ステータスバッジ ＆ グラフ色分けパレット
4大ステータスバッジの可読性:
● 完了 (Success)
▲ 進行中 (Warning)
■ 停止中 (Danger)
○ 未着手 (Pending)
グラフ色分け（明度差＋テクスチャ記号併用）:
プランA（青系 / ドット） 75%
プランB（オレンジ系 / 斜線） 45%
4
JIS X 8341-3 適合
WCAG 2.2 達成基準 自動診断
SC 1.4.1 色の使用（レベルA）
合格（要対策）
色のみに頼らず、下線・アイコン・テキスト・形状などの補助要素が併記されているかを検証。
SC 1.4.3 コントラスト（レベルAA）
4.5:1 クリア
通常テキストは背景色に対して4.5:1以上、太字/18pt以上は3.0:1以上の輝度比を確保。
SC 1.4.11 非テキストコントラスト（AA）
3.0:1 クリア
ボタン境界線、フォーム枠線、フォーカスリングが隣接色と3.0:1以上のコントラストを保持。
💡 CUD 3大原則（カラーユニバーサルデザイン機構）:
- 多様な色覚に配慮した配色: 赤と緑の組み合わせを避け、青とオレンジ、赤とシアンを採用する。
- 色以外の要素を併用: 形状、記号、文字、二重線、ドット柄で色を補助する。
- 色の名前を明記: 選択肢や凡例には色の名前を文字で併記する。
💻 色覚バリアフリー改善 CSS / Tailwind コード
※エラー表示・ボタングループの判別性を高める即戦力ユーティリティCSSです。
🖨️ A4アクセシビリティ監査証明レポート
自治体・大手企業クライアントへの納品時に添付できる、WCAG 2.2 & CUD適合検証シートをA4サイズで出力します。
ACCESSIBILITY AUDIT CERTIFICATE
Webアクセシビリティ ＆ カラーユニバーサルデザイン（CUD）適合証明書
検証日:
goroneko CUD Studio 検証エンジン
■ 適合規格 ＆ 達成基準 監査サマリー
| 達成基準 | 適合レベル | 検証対象コンポーネント | 判定結果 |
|---|---|---|---|
| SC 1.4.1 色の使用 | レベル A | フォームエラー、状態バッジ、アクションボタン | 適合（アイコン・下線併用） |
| SC 1.4.3 コントラスト (最低限) | レベル AA | 通常テキスト・ラベル文字（4.5:1基準） | 適合（4.5:1以上確保） |
| SC 1.4.11 非テキストコントラスト | レベル AA | ボタン外枠、フォーカスリング、入力欄枠線（3:1基準） | 適合（3.0:1以上確保） |
■ 4大色覚多様性 シミュレーション結果
① P型色覚（1型 / 赤色弱）:
赤と緑の混同を避け、青系・オレンジ系配色および警告記号（⚠️）の併記により誤操作ゼロを確認。
② D型色覚（2型 / 緑色弱・日本人男性5%）:
承認・削除ボタングループのアウトライン形状差別化により状態認知が完全に行えることを確認。
③ T型色覚（3型 / 青黄色弱）:
青と黄色のコントラスト明度差を十分に確保し、リンク下線表示を徹底。
④ 全色盲（モノクローム・明度知覚のみ）:
すべての情報が色の差だけでなく明度差および文字・アイコンで伝達可能であることを確認。
※本証明書は、W3C WCAG 2.2、JIS X 8341-3、およびデジタル庁ウェブアクセシビリティ導入ガイドブックの検証項目に準拠しています。
UIデザイナー・アクセシビリティ担当者必携機材
ハードウェアキャリブレーション対応