WCAGコントラストチェッカー — アクセシビリティ対応の配色

十分なカラーコントラストは多くのWebサイトで法的に義務付けられており、視覚障害のある方に不可欠です。チェッカーはコントラスト比を計算してWCAG基準への適合を即座に表示します。

WCAGコントラスト基準

WCAG AA：通常テストで4.5:1、大きなテキスト（18pt以上）で3:1。WCAG AAA：通常テキストで7:1、大きなテキストで4.5:1。AAが多くの国の最低法的基準。AAAが最大アクセシビリティの理想標準です。

コントラスト比の計算

比率＝（L1+0.05）÷（L2+0.05）、L1とL2は相対輝度。黒地に白は21:1（最大）。淡いグレーと白は1.2:1になることもあり——ほぼ誰にも読めないほどです。

デザインでの実践

白い背景の淡いグレーのテキストは視覚的に魅力的でもWCAGに失敗することが多いです。デザイン過程の早い段階でカラーパレットをテストしましょう。ブランドカラーのより暗いバリアントをテキスト用に使いましょう。