コントラストチェッカー — WCAG判定

コントラストを確認する手順

2つの色を指定する。デザインで使う文字色と背景色を選びます。
コントラスト比を見る。プレビューの下に比率が表示され、サンプルテキストで実際の見え方も確認できます。
4つの判定を確認する。それぞれの枠が、その基準・文字サイズで合格しているかどうかを示します。
合格するまで調整する。どちらか（多くは明るいほうの）色を少しずつ動かして、目標の基準を満たすまで調整します。入れ替えボタンで文字色と背景色を反転して試すこともできます。

このツールでできること

文字が読みやすいかどうかは、文字色だけでも背景色だけでも決まりません。2色の関係で決まります。このツールはその関係をコントラスト比という数値で測り、どのアクセシビリティ基準を満たしているかを判定します。読みにくい組み合わせを、まだ簡単に変更できる段階で見つけられます。

処理はすべてブラウザ内で完結します。インストールも会員登録も不要です。

WCAGの基準を理解する

コントラスト比は1:1（同じ色で見えない）から21:1（白地に黒）までの範囲を取ります。WCAG（Webコンテンツ・アクセシビリティ・ガイドライン）は、この範囲に基準線を引いています。AAは多くの組織が目標とするレベルで、各国のアクセシビリティ関連の規定でも参照されています。通常の文字で4.5:1、大きい文字で3:1です。AAAはさらに厳しく7:1と4.5:1で、文章量の多いサイトの本文では目指す価値がありますが、すべての箇所で満たすのは現実的にかなり難しい水準です。

注意したいのが「大きい文字」の定義です。感覚で決めるものではなく、WCAGではおよそ18pt（24px）以上、太字なら14pt（18.66px）以上と決められています。それ未満は通常の文字として扱われ、より厳しい比率が必要です。つまり20pxの小見出しは「大きい文字」ではなく、AAなら4.5:1を満たす必要があります。なお、この基準は文字に対するものです。意味を伝えるアイコンやUI部品には別の要件があり、純粋な装飾要素は対象外です。

よくある質問

どのレベルを目標にすべきですか？

多くの案件ではAAが現実的な目標で、アクセシビリティの規定が参照するのもこのレベルです。本文はAAAを目指せると理想的ですが、すべての箇所で達成しようとしてデザインが進まなくなるのは本末転倒です。

「大きい文字」とは何ptからですか？

およそ18pt（24px）以上、太字であれば14pt（18.66px）以上です。それ未満は、見た目が大きめでも通常の文字として、より厳しい比率が求められます。

グレーの文字が基準を満たしません

白背景に薄いグレーという組み合わせは、もっともよくある不合格例です。文字色を濃くするのがいちばん影響の少ない修正です。カラーピッカーでその色のHSLの明度を少しずつ下げて、合格するところを探してみてください。

画像やグラデーションの上の文字はどう判定しますか？

基準は同じですが、背景の色が場所によって変わります。文字が重なる範囲のいちばん明るい部分と暗い部分でそれぞれ確認するか、単色のオーバーレイを敷いて背景を一定にしてください。