クレームが来る前に文字のコントラストを確認する

やりたいこと

選んだ文字色と背景色の組み合わせが十分読めるか、ユーザー・レビュー担当・アクセシビリティ監査に指摘される前に確認したい。WCAG 2.xが閾値を定めており、このツールはその基準で判定します。

基準の意味

AAの通常文字は4.5:1で、本文の一般的な最低基準です。AAの大きい文字（おおむね18pt・24px以上、または太字14pt以上）は3:1で済みます。AAAは7:1と4.5:1に引き上げられ、高齢者や弱視の利用者が読む必要がある場面の目標です。

具体例

本文 #767676・背景 #ffffff は4.54:1で、AA通常文字は合格・AAA通常文字は不合格。#595959に変えると7.00:1で両方合格します。チェッカーは4つの判定を一度に表示し、組み合わせのプレビューも確認できます。

• 色は16進数・rgb()・hsl()で入力できます。カラーピッカーは16進数を返します。
• 比率は対称です。文字→背景でも背景→文字でも同じチェックになります。

制限

色のコントラストだけを測ります。WCAG式を超える可読性・フォント・サイズ・太さは評価せず、フォーカス表示・画像内文字・操作状態も対象外です。WCAG 3（APCA）は別のモデルを使います。これは多くの規制が今も参照する2.xの輝度式です。