WCAG カラー策定ツール

Web Content Accessibility Guidelines (WCAG) に準拠したカラースキームを設計するための、インタラクティブツールです。

主要機能

  • リアルタイムコントラスト比計算 – 前景色と背景色のWCAGコントラスト比を自動計算
  • WCAG準拠レベル判定 – A/AA/AAAレベルの合否を即座に表示
  • 複数バージョン対応 – WCAG 2.0 / 2.1 / 2.2 に対応
  • 自動色調整 – ワンクリックでWCAG基準を満たすように色を自動修正
  • カラーハーモニー提案 – 補色、類似色、トライアド、分裂補色を自動提案
  • リアルタイムプレビュー – 実際のテキスト表示を確認
  • JSONエクスポート – カラースキームをJSON形式で保存
  • コピー機能 – カラーコードをワンクリックでクリップボードにコピー

対応する色理論

  • 補色 (Complementary) – 色相環で180度反対の色
  • 類似色 (Analogous) – 色相環で隣接する色
  • トライアド (Triadic) – 色相環で120度間隔の3色
  • 分裂補色 (Split-Complementary) – 補色の両隣の色

機能詳細

WCAG準拠レベル

レベルA大きなテキスト: 3:1 以上
通常テキスト: 基準なし
レベルAA（推奨）大きなテキスト: 3:1 以上
通常テキスト: 4.5:1 以上
レベルAAA大きなテキスト: 4.5:1 以上
通常テキスト: 7:1 以上

大きなテキストの定義: 18pt（24px）以上、または14pt（18.5px）以上の太字

自動修正機能

選択したWCAG準拠レベルに基づいて、前景色を自動的に調整します

  1. 背景色の輝度を分析
  2. 目標コントラスト比を計算
  3. 前景色のHSL値を調整（色相と彩度は維持、輝度のみ変更）
  4. 基準を満たすまで反復

カラーハーモニー提案

各カラーペアに対して、以下の色理論に基づいた提案を生成

  • 補色: メインカラーの補色を背景色として提案
  • 類似色: 調和する近い色相を提案
  • トライアド: バランスの取れた3色配色の一部を提案
  • 分裂補色: 補色に近いが柔らかい組み合わせを提案

各提案には即座にコントラスト比が表示され、WCAG基準を満たしているかどうかが一目でわかります。

WCAGバージョンの違い

バージョン公開年主な特徴
WCAG 2.02008年Webアクセシビリティの基礎となる国際標準
WCAG 2.12018年モバイルデバイス、ロービジョン、認知・学習障害への対応を強化
WCAG 2.22023年最新版。追加の成功基準を含む

注: コントラスト比の基準はすべてのバージョンで同一です。このツールではバージョンを選択できますが、色のコントラスト判定ルール自体は変わりません。

エクスポート形式

JSONエクスポート機能を使用すると、以下の形式でカラースキームが保存されます。

[
  {
    "name": "プライマリ",
    "foreground": "#000000",
    "background": "#FFFFFF",
    "contrast": "21.00"
  },
  {
    "name": "セカンダリ",
    "foreground": "#1a1a1a",
    "background": "#f0f0f0",
    "contrast": "12.63"
  }
]

このJSONファイルは、デザインシステムやCSSフレームワークに簡単に統合できます。

参考資料

注意: このツールは教育目的およびデザイン支援のために提供されています。実際のWebサイトやアプリケーションでは、必ず複数のアクセシビリティツールで検証し、実際のユーザーテストを実施することをお勧めします。

WCAG カラー策定ツール