Go Toolstack

WCAG カラーコントラストアクセシビリティ判定

Webアクセシビリティ基準（WCAG 2.1）に基づき、文字色と背景色の明度比を検証。

WCAG カラーコントラストアクセシビリティ判定

Webアクセシビリティ基準（WCAG 2.1）に基づき、文字色と背景色の明度比を検証。

使い方

1
Enter Query Details
Specify the parameters, location, or query data you want to look up.
2
Fetch or Validate Data
Retrieve or validate information securely within your session.
3
Inspect Detailed Results
Review schedules, reference figures, or comprehensive data tables.

このカテゴリーの他のクライアントサイドツールを見る

開発者ツールハブ • ワークフローと機能比較

すべての開発者ツールツール、ブラウザの制限、および目的別選択ガイドを確認できます。

ハブを見る →
JSONフォーマッター & バリデーター

64ビット精度を保持してJSONを整形・圧縮し、JSON Schema（Draft-07 / 2020-12）で厳格に検証します。
Base64 エンコーダー & デコーダー

テキストやファイルをBase64形式にエンコード、またはプレーンテキストにデコード。
SQLフォーマッター & 圧縮ツール

ブラウザ上でSQLクエリを美しくインデントし、キーワードを大文字化して圧縮。

関連ブログガイド

技術ガイド、トラブルシューティング、ベストプラクティス解説

概念＆ナレッジハブ

WCAGカラーコントラスト比チェッカー、アクセシビリティAA/AAA適合診断

Webデザインにおいて、文字色（前景色）と背景色のコントラスト比は、弱視者、高齢者、色覚多様性を持つユーザーだけでなく、直射日光下のスマートフォン画面を利用するすべてのユーザーの可読性を担保する最重要指標です。W3CのWeb Content Accessibility Guidelines（WCAG 2.1）が定める数理モデルに基づき、相対輝度から厳密なコントラスト比を算出します。

例えばデザイナーがボタンスタイルの配色として、背景色にブランドブルー#2563EB、文字色にホワイト#FFFFFFを選択したケースを検証します。ツールは両者のsRGB色空間における相対輝度（Luminance）を算出し、コントラスト比「5.15 : 1」を導出します。この比率はWCAG 2.1の基準に照らし合わせ、「レベルAA（通常テキスト必要比率 4.5:1以上）」に完全適合、「レベルAA（大見出し必要比率 3.0:1以上）」にも適合と判定されます。一方で極めて厳格な「レベルAAA（7.0:1以上）」に対しては不適合である旨が即座にフィードバックされ、目標コントラストを達成するための代替カラーパレットを提案します。

カラーコードの変換、輝度計算、アクセシビリティ合否判定はすべてブラウザ内でのみローカルに演算されます。自社プロダクトのブランドカラー設計情報が外部に送信されることはありません。

コアアーキテクチャ＆計算式

コントラスト比 = (L1 + 0.05) / (L2 + 0.05) ； 相対輝度 L = 0.2126R + 0.7152G + 0.0722B

sRGB値をガンマ補正展開してリニアRGBへ変換し、人間の視覚感度（緑71.5%・赤21.3%・青7.2%）で加重平均した相対輝度L1（明）とL2（暗）の比を算出します。

ベストプラクティスと必須ガイドライン

  • 通常テキスト（18px未満）には最低「4.5:1以上」の比率を維持： 本文の文字色と背景色は、WCAG 2.1 レベルAAの基本要件である4.5:1を下回らないように厳格にパレット管理してください。
  • 太字（14pt以上）または大型見出し（18pt以上）は「3.0:1以上」： 文字サイズが大きい見出しや太字テキストでは視認性が高まるため、3.0:1の緩和基準が適用されます。
  • UIコンポーネント（ボタン境界線・アイコン）の「3.0:1」基準： テキストだけでなく、クリック可能なボタンの枠線やフォーム入力欄の境界線も背景に対して3:1以上のコントラストが必要です。
  • プレースホルダーテキストの薄すぎるグレー配色を避ける： 入力フォームのプレースホルダーが白背景に対して薄いグレー（#CCCCCC等）だと、視認不能となりユーザビリティを大きく損ないます。

よくある質問 (FAQ)

WCAGの「レベルAA」と「レベルAAA」の違いは何ですか？
レベルAAは一般的なWebサイトや公共機関サイトで達成が国際的に義務付けられている標準基準（4.5:1以上）です。レベルAAAは最も厳格なアクセシビリティ基準（7.0:1以上）です。
HEX（16進数）以外のカラー形式（RGBやHSL）でも入力できますか？
はい。カラーピッカーのGUI選択に加え、HEXコード、RGB値、HSL値を自由に入力してリアルタイムにコントラスト比を判定できます。
色覚異常（色弱・色盲）のシミュレーションとしても使えますか？
コントラスト比は純粋な光の「明暗（輝度差）」を測る指標であるため、特定の色が見分けにくい色覚多様性を持つ方にとっても文字を確実に識別できる客観基準となります。
自社のデザインパレットが外部に収集されることはありますか？
ありません。すべての色彩演算はブラウザのクライアントメモリ上でのみ完結し、入力データが外部サーバーへ送信されることは一切ありません。