コントラスト比計算

色のコントラストは、前景と背景の相対輝度の差を表します。十分なコントラストは、弱視、色覚の違い、加齢による視力変化、まぶしさ、低品質の画面といった条件でも、デジタルインターフェースを読み取り操作しやすくします。この計算機はHEXまたはRGBの2色をWeb Content Accessibility Guidelinesで定義された相対輝度に変換し、同じ輝度の 1:1 から白と黒の 21:1 までの比率を示します。 計算は赤・緑・青の生の値を単純に比較するものではありません。各sRGBチャンネルを正規化し、表示ガンマを考慮して線形化します。人の視覚は緑色光への感度が最も高いため、線形化した赤・緑・青にそれぞれ 0.2126、0.7152、0.0722 の輝度重みを適用します。最終的な比率は、明るい側の輝度に 0.05 を加えた値を、暗い側の輝度に 0.05 を加えた値で割って求めます。この標準方式では入力順にかかわらず同じ結果になります。 WCAG 2.x の達成基準 1.4.3 は、レベルAAで通常文字に最低 4.5:1、大きな文字に最低 3:1 を求めます。レベルAAAではそれぞれ 7:1 と 4.5:1 になります。大きな文字とは一般に通常書体で 18 ポイント以上、太字で 14 ポイント以上を指し、一般的なブラウザーの前提では約 24 CSSピクセルと 18.66 CSSピクセルに相当します。UIコンポーネントや意味のある図形には別の要件があり、隣接色に対して通常 3:1 が求められます。 比率の基準を満たすことは重要ですが、アクセシブルな設計を保証するものではありません。細いフォント、特殊な書体、グラデーション、画像、ホバー状態、透明度、アンチエイリアス、変化する背景は実際の読みやすさに影響します。プレースホルダーや無効なコントロールも、基準上の扱いが異なる場合でも丁寧に確認すべきです。状態を色だけで伝えず、ラベル、アイコン、模様などの手がかりを併用してください。初期状態のスクリーンショットだけでなく、フォーカス表示とすべての操作状態を確認します。 6桁HEX、3桁HEX、または標準的なカンマ区切りRGB形式を入力できます。チャンネル値がゼロから 255 の範囲か検証し、入力された色そのものを評価します。結果が基準をわずかに下回る場合は、前景を暗くするか背景を明るくして再計算してください。自動チェックの後には、キーボード操作、拡大とリフロー、スクリーンリーダーの確認、障害のある方からの意見収集も必要です。設計・実装時に基本的な配色問題を早期発見し、完成した画面を実際の条件で確認してください。