カラーコントラストチェッカー

利用方法

前景色、背景色それぞれをRGBの16進で入力するか、カラーピッカーから色を選択します。不透明度（アルファ値）を入力して前景の不透明度を調整することもできます。明るさのスライダーを利用すると元の色を基準に明るさを調整することができます。

色を設定すると、リアルタイムで計算結果が表示され、WCAGの基準を満たしているかの合否判定が分かります。

WCAGの合否基準について

コントラスト比が通常のテキストでは4.5:1以上、大きなテキストでは3:1以上、グラフィックとUIコンポーネントでは3:1以上でレベルAAを満たします。

レベルAAAでは通常のテキストで7:1以上、大きなテキストで4.5:1以上を満たす必要があります。

テキストサイズについて

大きいテキストは14pt(通常18.66px)以上でbold、または18pt（通常24px）以上であるものと定義され、それを満たさないものは通常のテキストサイズになります。

こんな場面で使えます

• Webサイトやアプリのテキストカラーがアクセシビリティ基準を満たすか確認したい
• デザインカンプの配色をコーディング前にチェックしたい
• 透過（アルファ値あり）の色を使っていてコントラスト比が計算しづらい
• クライアントへのアクセシビリティ対応の根拠を示したい

よくある質問

Q.WCAGとは何ですか？
Web Content Accessibility Guidelinesの略で、Webコンテンツのアクセシビリティに関する国際規格です。日本でも公共機関や大手企業のサイトで準拠が求められるケースが増えています。

Q. AAとAAAの違いは何ですか？ AAは多くのサイトで達成が推奨される標準レベル、AAAはより厳格な最高レベルです。一般的なWebサイトではAAへの準拠を目標とするケースがほとんどです。

Q.アルファ値（不透明度）はどう影響しますか？ 前景色に透明度がある場合、背景色と混合した実際の色でコントラスト比を計算する必要があります。このツールはアルファ値を考慮した計算に対応しています。

Q.コントラスト比はどうやって計算されますか？ WCAG規格に基づき、前景色と背景色それぞれの相対輝度を算出し、その比率を計算しています。最大値は21:1（黒と白の組み合わせ）、最小値は1:1（同色）です。

Q.大きいテキストの基準はどこで変わりますか？ 14pt以上でbold（通常18.66px相当）、または18pt以上（通常24px相当）が大きいテキストの定義です。それ未満は通常テキストとして判定されます。