カテゴリ

Color Contrast Checker

前景色と背景色のコントラスト比を計算し、WCAGのAA・AAA基準を満たすか確認します。

前景色（文字色）背景色

コントラストの見え方サンプル

概要

前景色（文字色）と背景色のコントラスト比を、WCAG 2.1で定義された計算式に基づいて算出するツールです。
算出したコントラスト比が、通常テキスト・大きいテキストそれぞれについてAA基準（最低限）・AAA基準（推奨）を満たすかを判定します。
#RRGGBB・rgb(r, g, b)・hsl(h, s%, l%)の各形式に対応しています。

使い方

前景色（文字色）と背景色を入力します。
「確認する」ボタンをクリックします。
コントラスト比と、通常テキスト・大きいテキストそれぞれのAA・AAA基準の合否が表示されます。

入力例・出力例

入力

前景色: #000000, 背景色: #FFFFFF

出力

21.00:1（AA・AAAともに合格）

利用シーン

Webサイトのテキストと背景色の組み合わせが、アクセシビリティ基準を満たしているか確認する
デザインカンプの配色案が、視覚的に読みやすいコントラストになっているか検証する
既存サイトの色をリニューアルする際、変更後もWCAG基準を満たすか確認する

詳しい解説

基準を満たさないときの直し方

コントラスト比が足りない場合、色味（色相）は変えずに明るさだけを調整すると、デザインの印象を保ったまま直せます。HSL形式で指定すると、H（色相）とS（彩度）はそのままに、L（明度）だけを下げる（文字を暗くする）か、上げる（背景を明るくする）ことで調整できます。このツールはhsl()形式の入力にも対応しているため、Lの値を少しずつ変えながら、基準を満たす値を探せます。

ブランドカラーのように色そのものを変えられない場合は、その色を本文の文字ではなく、背景や大きな見出し、アイコンに使う方法もあります。大きな文字や、アイコンなど文字以外の要素は、基準が3:1に緩和されるためです。

写真や半透明の背景の上に文字を置く場合

写真の上に文字を載せる場合、写真の明るい部分と暗い部分で読みやすさが変わるため、2色の比較だけでは判断できません。文字の後ろに半透明の暗い帯（オーバーレイ）を敷く、文字に影を付けるなどして、写真の最も明るい部分の上でも読めるようにします。

確認するときは、文字の背景になる部分のうち最も明るい色を取り出し、その色と文字色の組み合わせで計算すると安全です。

よくある質問

AA基準とAAA基準の違いは何ですか？

AAは多くのWebサイトが満たすべき最低限の基準（通常テキスト4.5:1、大きいテキスト3:1）、AAAはより高いアクセシビリティを目指す推奨基準（通常テキスト7:1、大きいテキスト4.5:1）です。

「大きいテキスト」とはどのくらいのサイズを指しますか？

WCAGでは、18pt（24px相当）以上、または太字の場合は14pt（約18.66px）以上のテキストを「大きいテキスト」と定義しています。

透明度（アルファ値）を持つ色は正しく計算されますか？

はい。文字色のアルファ値（rgba()・hsla()）は、背景色と重ねて実際に見える色に合成してから計算します。背景色が半透明の場合は、その下にある色によって見え方が変わるため、重ねた後の不透明な色を入力してください。

注意点

計算はすべてブラウザ内で完結し、入力した色の値が外部へ送信されることはありません。
本ツールはテキストと背景の単純な2色間のコントラストのみを計算します。グラデーションや画像を背景に使う場合は、実際の見た目で別途確認してください。