コントラスト比計算・最短補正候補色、タップターゲット領域(24px/44px)、テキスト行送り、
そしてYouTubeショート/TikTok/リールのUI被り防止まで、制作現場の実務計算をワンストップ統合。
※以下のプリセットは制作実務で頻出する配色・解像度を即座に検証するための「入力例」です。クリックすると各検証ツールに条件を引き継いで起動します。
スレートグレー × 白背景
高視認性テキスト × 深黒スレート
YouTubeショート / TikTok / Reels
WCAG 2.2 達成基準 2.5.8 / 2.5.5
デザインカンプ作成からCSS実装、クライアント納品時の適合確認まで順を追ってご活用いただけます。
W3C相対輝度公式によるコントラスト比算出、色相維持・二分探索による補正候補色、色覚多様性SVGシミュレーション、A4印刷・CSV出力。検証した配色をそのまま01bパレットマトリクスへ引き継ぎ可能。
複数色(5〜8色)の全組み合わせコントラスト比を総当たりマトリクスで瞬時に判定。不合格ペアの最短輝度補正、CSS変数・Tailwind設定エクスポート。01単一ペア監査ツールと相互に値連携。
小さなアイコンやボタンの見た目(16px等)を保ったまま、タップ判定だけを44px以上(AAA/iOS)に広げる現場標準CSS(擬似要素::after/Tailwind)を自動生成。実寸指タップ判定プレビュー。
モバイルUIのタップ領域(2.5.8 AA / 2.5.5 AAA)とテキスト間隔(1.4.12 行間1.5倍・文字間0.12倍)の適合度を総合診断しA4検査シート出力。
YouTubeショート、TikTok、Instagramリール、X(Twitter)のいいね・コメントUI被りをSVGオーバーレイでリアルタイム検証。
ブログ・Web用の1200×630px OGP画像をブラウザ上で即座に作成&高画質PNG保存。X Large Card・LINEでの表示を実機プレビューし、WCAGコントラスト比自動判定&HTML Metaタグ/JSON-LDを出力。
レスポンシブWebデザイン用の画像比率(16:9、4:3、1:1)計算、Retinaディスプレイ用高解像度書き出しピクセルを自動逆算。
実務で求められる主要なコントラスト比およびタップ寸法の公式基準です。
| 達成基準(SC) | レベル | 対象要素 | 必須要件・基準値 |
|---|---|---|---|
| 1.4.3 コントラスト (最低限) | AA | 通常テキスト / ラージテキスト | 通常文字: 4.5:1 以上 / ラージ文字(18ptまたは14pt太字): 3.0:1 以上 |
| 1.4.6 コントラスト (高度) | AAA | 通常テキスト / ラージテキスト | 通常文字: 7.0:1 以上 / ラージ文字: 4.5:1 以上 |
| 1.4.11 非テキストのコントラスト | AA | UIコンポーネント・アイコン・枠線 | 隣接色との比率: 3.0:1 以上 |
| 2.5.8 ターゲットサイズ (最低限) | AA | ポインター入力(ボタン・リンク) | ターゲットサイズ: 24×24 CSSピクセル 以上(または十分な余白) |
| 2.5.5 ターゲットサイズ (高度) | AAA | ポインター入力(ボタン・リンク) | ターゲットサイズ: 44×44 CSSピクセル 以上 |