コントラストチェッカー

Web Content Accessibility Guidelines (WCAG) 2.1は、W3Cによって公開され、視覚障害のある人々がテキストを読めるようにするための最小コントラスト比を定義しています。ガイドラインは3つの適合レベルを指定します：A（最小）、AA（標準）、AAA（拡張）。レベルAAでは、通常テキスト（18pt未満または14pt太字未満）に4.5:1、大きなテキスト（18pt以上または14pt太字以上）に3:1が必要です。

コントラスト比は2色の相対輝度を使用して計算されます。コントラスト比は(L1 + 0.05) / (L2 + 0.05)で、L1はより明るい色、L2はより暗い色です。0.05のオフセットは画面上の環境光フレアを考慮します。

これらの要件は恣意的ではありません——人間の視覚に関する広範な研究に基づいています。男性の約8%、女性の約0.5%が何らかの色覚異常を持っています。低コントラストはこれらのユーザーだけでなく、明るい太陽光の下や低品質のディスプレイで画面を見るすべての人に影響します。多くの法域でWCAGコンプライアンスは公開ウェブサイトの法的要件です。

最も一般的なコントラストの間違いは、白背景に薄いグレーのテキストを使用することです。#999や#AAAのグレーはコントラスト比がそれぞれ2.85:1と2.32:1で、4.5:1の最小値を下回っています。白背景のセカンダリテキストには#767676（4.54:1）以上を使用してください。もう一つの一般的な問題は、視覚的には良いがコントラストチェックに失敗するブランドカラーの使用です。

大きなテキスト（見出し、ボタン）の3:1要件はより緩やかですが、乱用しないでください。可能な限り4.5:1を目指してください。色付き背景を使用する場合、テキストカラーとホバーやフォーカス状態で表示される可能性のあるテキストの両方をテストしてください。