1. カラー設定＆ライブプレビュー
rgb(30, 41, 59)
rgb(255, 255, 255)
Webアクセシビリティ見出し (Large Text)
本文テキストの可読性プレビューです。小さな文字や細いウェイトでも背景との明度差が十分に確保されているか、長文の読みやすさを確認してください。
リンクテキストの視認性
色覚多様性（CVD / カラーユニバーサルデザイン）シミュレーション
P/D/T型色覚での見え方検証テキスト
赤や緑などの色相に依存せず、明暗（ルミナンス）の差によって情報が正確に伝わっているかテストできます。
2. 適合判定・WCAG 2.2 / APCA
12.63 : 1
コントラスト比 (L1 + 0.05) / (L2 + 0.05)
| WCAG 2.2 基準項目 | 必要比率 | 判定 |
|---|---|---|
|
通常テキスト (Level AA)
18pt未満 / 本文・キャプション
|
4.5 : 1 | 合格 (PASS) |
|
大きなテキスト (Level AA)
18pt以上 / 14pt太字以上
|
3.0 : 1 | 合格 (PASS) |
|
UIコンポーネント・図表 (Level AA)
ボタン枠線・アイコン・入力欄
|
3.0 : 1 | 合格 (PASS) |
|
通常テキスト (Level AAA)
最高基準のユニバーサル可読性
|
7.0 : 1 | 合格 (PASS) |
|
次世代知覚コントラスト (APCA Lc)
WCAG 3.0候補アルゴリズム
|
Lc 60〜75+ | Lc 88 (高可読性) |
/* CSS Variables */
:root {
--text-color: #1E293B;
--bg-color: #FFFFFF;
}