抽出カラーのアクセシビリティを確保する

アクセシビリティと抽出カラーパレット

写真から抽出された色は視覚的な魅力のために最適化されており、アクセシビリティのためではありません。抽出パレットを本番で使用する前に、すべてのカラーコンビネーションがWCAG（Webコンテンツアクセシビリティガイドライン）のコントラスト要件を満たしていることを確認する必要があります。

WCAGコントラスト比要件

レベル	通常テキスト	大きなテキスト（18px+太字または24px+）
AA	4.5:1	3:1
AAA	7:1	4.5:1

抽出パレットの一般的なアクセシビリティ問題

問題1: 中間トーンパレット 均一な照明の写真はすべての色が類似の明度（L: 40-60%）を持つパレットを生成することがあります。どのペアも十分なコントラストがありません。

解決策： 各抽出色からより明るい/暗いバリアントを導出。最も明るいものを背景に、最も暗いものをテキストに使用。

問題2: 低コントラスト写真 霧がかった風景、ヴィンテージフィルター写真、低彩度画像は、すべての色が近い明度のパレットを生成します。

解決策： 明度範囲を拡大。明るい色をL:85%以上に、暗い色をL:25%以下に押し上げます。

準拠のための色の調整

抽出色ペアがコントラストに失敗した場合：

オプション1: テキスト色を暗くする
  元: #6b8ca5 on #d4e8f5 → 2.3:1 (不合格)
  調整後: #2c5f7c on #d4e8f5 → 4.7:1 (AA合格)

オプション2: 背景を明るくする
  元: #4a7b9d on #7aabc5 → 1.8:1 (不合格)
  調整後: #4a7b9d on #e8f4fc → 4.6:1 (AA合格)

抽出パレットのアクセシビリティチェックリスト

• すべてのテキスト/背景ペアがAAコントラスト（4.5:1）を満たす
• フォーカスインジケーターがすべての背景に対して見える
• リンクがボディテキストと区別できる（色だけでなく）
• 色が情報を伝える唯一の手段ではない
• ダークモードパレットもすべてのコントラスト要件を満たす