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

テキスト色と背景色のコントラスト比を計算し、WCAG 2.0 の AA / AAA 基準を満たしているか確認できるツールです。見出しや本文の文字サイズごとに判定結果を表示し、配色の見やすさをプレビューでも確かめられます。

Webサイトのアクセシビリティ確認、ブランドカラーの調整、UI コンポーネントの配色チェックをしたいときに便利です。

使い方

1. テキストカラーと背景カラーを入力します。
2. コントラスト比が自動で計算されます。
3. AA / AAA の small text / large text ごとの判定結果を確認します。
4. プレビューで実際の見え方を見ながら色を微調整します。

色の入れ替えボタンを使うと、テキスト色と背景色をすぐに反転できます。明るい背景と暗い背景の両方で試したいときに便利です。

確認できる内容

• コントラスト比
• AA / AAA の適合状況
• small text / large text それぞれの判定
• 選択した配色のプレビュー

数値だけでなく、判定結果と見た目を並べて確認できるため、仕様チェックとデザイン調整を同時に進めやすくなります。

WCAG 2.0 の基準

AA

• small text: 4.5:1 以上
• large text: 3:1 以上

AAA

• small text: 7:1 以上
• large text: 4.5:1 以上

large text は、18pt（約 24px）以上、または太字 14pt（約 18.5px）以上の文字を指します。本文テキストと見出しでは必要な基準が変わるので、用途に合わせて確認するのが安全です。

入出力例

たとえば、テキスト色に #121212、背景色に #FAFAFA を指定すると、ツールには次のような情報が表示されます。

Contrast: 18.09
AA small text: pass
AA large text: pass
AAA small text: pass
AAA large text: pass

このように、1組の色に対してコントラスト比と各基準の通過状況をまとめて確認できます。

活用シーン

• 本文テキストやボタンラベルの見やすさを確認したいとき
• ダークモードとライトモードで配色を見直したいとき
• ブランドカラーを使いながらアクセシビリティ基準を満たしたいとき
• デザインレビュー前に WCAG の最低限の条件を確認したいとき

使うときの注意点

• 判定はテキスト色と背景色の組み合わせに対するもので、余白や文字サイズそのものは自動調整されません
• large text と small text では基準が異なるため、同じ配色でも用途によって評価が変わります
• コントラスト比が高くても、細い文字や小さな文字では読みづらく感じることがあります