COLOR CONTRAST CHECKER
読みやすい色を、
ふたつ。
文字と背景を選ぶ。比率を見る。実際の文字で確かめる。
AA / AAA
01
色を組み合わせる
#RGB / #RRGGBB形式。透明度は扱いません。
ここから試す
CONTRAST RATIO
—: 1
色を確認しています
—
LIVE PREVIEW24px / 400
すべての人に、届く色。
A good day begins with a clear message.
Color is communication.正しいHEX値を入力すると、ここにプレビューを表示します。
02
文字のコントラスト基準
標準の文字 / AA—4.5 : 1 以上
大きな文字 / AA—3 : 1 以上
標準の文字 / AAA—7 : 1 以上
大きな文字 / AAA—4.5 : 1 以上
大きな文字:通常24px以上、太字で約18.67px以上が目安。日本語などでは同等の文字サイズを確認してください。判定は表示の丸め前の値を使います。
色の値を変えると、自動で計算します。
BEYOND THE NUMBER
数値は、読みやすさの出発点。
このツールは、指定した不透明なsRGBの2色について文字のコントラストを計算します。写真・グラデーション・透明度・細い書体などは別途確認が必要です。この結果だけで、ページ全体のアクセシビリティ適合を保証するものではありません。