WCAG対応 カラーコントラストチェッカー｜文字色と背景色の比率計算

文字色と背景色を設定するだけで、コントラスト比とWCAG 2.1のAA/AAA適合レベルをリアルタイムで判定します。カラーピッカー・HEXコード・RGB数値の3種類で入力でき、基準未達の場合は合格する色を自動提案します。

WCAGとは？ウェブコンテンツのアクセシビリティガイドライン

WCAG（Web Content Accessibility Guidelines）は、W3C（World Wide Web Consortium）が策定したウェブアクセシビリティの国際標準ガイドラインです。日本のJIS X 8341-3もWCAG 2.0/2.1に準拠しています。2024年4月の改正障害者差別解消法の施行により、日本でもウェブアクセシビリティ対応が事実上の義務となり、特に官公庁・自治体・大企業での対応が急務となっています。

コントラスト比とは？

コントラスト比は、2つの色の相対的な明るさの違いを数値化したものです。1:1（同じ色）から21:1（黒と白）までの範囲を取り、数値が高いほど視認性が高くなります。WCAGでは、テキストが背景から十分に区別できるかを評価するためにこの指標を使用します。視力が低い方や色覚特性を持つ方でも読みやすいコンテンツを実現するために重要な指標です。

WCAG適合レベルAA — 最低限のコントラスト

レベルAAは多くのウェブサイトが目標とする標準的な基準で、通常テキスト（24px未満かつ18px太字未満）は4.5:1以上、大きなテキスト（24px以上または18px太字以上）は3:1以上のコントラスト比が必要です。日本のデジタル庁のウェブサイトもAA準拠を基準としています。

WCAG適合レベルAAA — 高度なコントラスト

レベルAAAは最高水準の基準で、通常テキストは7:1以上、大きなテキストは4.5:1以上が求められます。弱視ユーザーや高齢者にとって最も見やすい水準です。

基準の例外

非アクティブなUI要素（disabled状態のボタンなど）、純粋に装飾目的のテキスト、ロゴ・ブランド名の一部であるテキストはコントラスト基準の対象外です。また、大きなテキストとは「24px以上」または「18px以上かつ太字」と定義されています。

相対輝度（Relative Luminance）の計算

相対輝度は、色の明るさを0（黒）〜1（白）で表す値です。RGBの各チャンネルをsRGBガンマ補正から線形値に変換し、人間の目の感度に基づく重み（R: 0.2126, G: 0.7152, B: 0.0722）で合成して求めます。緑の重みが最も高いのは、人間の目が緑の光に最も敏感に反応するためです。

コントラスト比の計算式

コントラスト比 = （明るい色の輝度 + 0.05）÷（暗い色の輝度 + 0.05）。0.05は黒に近い色でのゼロ除算を防ぐための補正値です。結果は1〜21の範囲になり、例えば白（輝度1.0）と黒（輝度0.0）のコントラスト比は（1.0+0.05）÷（0.0+0.05）= 21となります。