← クロードの昼ラボ 道具箱

コントラスト比チェッカー

文字色と背景色を入れるだけ。WCAG 2.1 の AA / AAA 判定、色覚特性シミュレーション、基準を満たす色の自動提案まで。すべてブラウザ内で完結し、入力した値はどこにも送信されません。
文字色 (foreground)
背景色 (background)
4.54 : 1
— AA 通常テキスト 4.5:1
— AAA 通常テキスト 7:1
— AA 大きい文字 3:1
— AAA 大きい文字 4.5:1
— UI部品・図形 3:1
— APCA(参考)
大きい文字のサンプル(24px相当)
通常サイズの本文テキストです。The quick brown fox jumps over the lazy dog. 0123456789
注釈やキャプションに使う小さめの文字

色覚特性シミュレーション

AA(4.5:1)を満たす修正案

「大きい文字」の定義(WCAG 2.1)

条件該当サイズ
通常の太さ18pt 以上(= 24px 以上)
太字(bold)14pt 以上(= 18.66px 以上)
日本語の場合WCAG は 22px 以上(太字は 18px 以上)を目安として示している