● LOCAL COLOR TOOL

COLOR CONTRAST CHECKER

読みやすい色を、
ふたつ。

文字と背景を選ぶ。比率を見る。実際の文字で確かめる。

WCAG 2
AA / AAA
01

色を組み合わせる

#RGB / #RRGGBB形式。透明度は扱いません。

ここから試す

CONTRAST RATIO

—: 1

色を確認しています

—
LIVE PREVIEW24px / 400

すべての人に、届く色。

A good day begins with a clear message.

Color is communication.
02

文字のコントラスト基準

標準の文字 / AA—4.5 : 1 以上
大きな文字 / AA—3 : 1 以上
標準の文字 / AAA—7 : 1 以上
大きな文字 / AAA—4.5 : 1 以上

大きな文字:通常24px以上、太字で約18.67px以上が目安。日本語などでは同等の文字サイズを確認してください。判定は表示の丸め前の値を使います。

色の値を変えると、自動で計算します。

BEYOND THE NUMBER

数値は、読みやすさの出発点。

このツールは、指定した不透明なsRGBの2色について文字のコントラストを計算します。写真・グラデーション・透明度・細い書体などは別途確認が必要です。この結果だけで、ページ全体のアクセシビリティ適合を保証するものではありません。