WCAG AA・AAA コントラストチェック

WCAG 2.2 の AA・AAA 基準に照らして色のコントラストを確認できます。文字サイズごとのプレビューと、アクセシビリティに配慮した代替色も確認できます。

入力欄にポインターを合わせるか選択するとヘルプが表示されます。Escapeで閉じます。

前景色背景不透明なキャンバス

HEX、RGB、RGBA、HSL を使用してください。透明色は不透明なキャンバスの上に合成します。

5.84:1

判定には丸めた表示値ではなく、完全な精度の比率を使います。

WCAG 2.2
レベル	適用	SC	最小値	結果
AA	通常の文字	1.4.3	4.5:1	適合
AA	大きな文字	1.4.3	3:1	適合
AAA	通常の文字	1.4.6	7:1	不適合
AAA	大きな文字	1.4.6	4.5:1	適合
AA	インターフェース部品とグラフィック	1.4.11	3:1	適合

プレビュー用テキストフォントサイズ（CSS px）太字

Aa — fiokit.

通常の文字: AA ✓ · AAA ✗

大きな文字：24 CSS px 以上、または太字で18.67 CSS px（14 pt）以上。

提案する前景色の目標レポート

WCAG 2.2
#155bdf / #ffffff (#ffffff)
5.8433:1
AA 通常の文字 (SC 1.4.3): PASS — 4.5:1
AA 大きな文字 (SC 1.4.3): PASS — 3:1
AAA 通常の文字 (SC 1.4.6): FAIL — 7:1
AAA 大きな文字 (SC 1.4.6): PASS — 4.5:1
AA インターフェース部品とグラフィック (SC 1.4.11): PASS — 3:1

色の組み合わせを確認するツールであり、WCAG 全体への適合を確認するものではありません。隣接色、操作状態、実際のコンテンツは別途評価してください。

W3C — SC 1.4.3 · SC 1.4.6 · SC 1.4.11

使い方

前景色、背景色、不透明なキャンバスを設定します。AA・AAA の結果は即座に更新されます。文字サイズと太さを試し、提案色を適用したりレポートをダウンロードしたりできます。

使用例

色

#155bdf

よくある質問

入力内容はサーバーに送信されますか？

いいえ。入力内容はこのブラウザ内で処理され、サーバーに送信・保存されません。

WCAG AA・AAA コントラストチェックを使う際の注意点は？

文字と非テキスト要素の基準を別々に表示します。この色の確認だけで WCAG 全体への適合を認証するものではありません。