カラーコントラストチェッカーとは？

文字色と背景色のコントラスト比を計算し、WCAGのAA・AAA基準とAPCAの参考値を確認できるツールです。本文や見出しに使う配色が読みやすさの基準を満たすかを、色を変えながら確かめられます。

使い方

1. 文字色と背景色を入力する
2. コントラスト比、WCAGの合否、APCAの参考値、プレビューが更新される
3. 判定が足りない場合は、明度を調整するか色を入れ替えて試す

色は3桁または6桁の16進数のほか、rgb()・hsl()・oklch()などのCSS表記でも入力できます。よく使う配色から始めたいときは、ブランドプリセットを選ぶと文字色と背景色がまとめて切り替わります。

判定の見方

コントラスト比は1:1から21:1までの値で、大きいほど文字と背景の明暗の差があります。

WCAG 2.xの基準は、通常の文字と大きな文字で異なります。

大きな文字は24px以上、または太字18.66px以上の文字を指します。通常の文字でAAAを満たすとAAA、AAを満たすとAA、大きな文字だけでAAを満たすと「大きな文字のみ」と表示されます。

APCAは別の計算方式による参考値です。Lcが75以上なら本文、60以上なら大きな文字に使える目安で、マイナスは暗い背景に明るい文字を置いた組み合わせを表します。WCAGの判定は置き換えないため、基準の確認にはWCAGの結果を使ってください。

主な設定項目

明度

文字色と背景色それぞれの明度を0〜100%で調整できます。色味を保ったまま明るさだけを変えたいときに使います。

ブランドプリセット

SpotifyやIKEAなど、実在するブランドの配色をまとめて適用できます。色の組み合わせを考える出発点にしたいときに使います。

活用シーン

• サイトやアプリの配色が、本文の読みやすさの基準を満たすか確認する
• ブランドカラーをボタンや見出しに使う前に、背景との組み合わせを確かめる
• ダークモード用に、明るい背景の配色を反転させて読みやすさを確認する
• デザインレビューで、配色の指摘を数値で共有する

使うときの注意点

• 判定の対象は文字色と背景色の組み合わせだけです。フォントの太さ、字間、背景の画像や透過は考慮しません
• コントラスト比が基準を満たしていても、非常に細い文字や小さい文字では読みにくく感じることがあります
• APCAはWCAG 3の策定途中の方式です