manage-color-contrast

スキル：色のコントラストを管理する

目的

テキストやインタラクティブな要素が背景に対して十分なコントラストを保ち、読みやすさとアクセシビリティを確保します。

種類

評価＋修正

入力

• テキストの色とサイズ
• 背景色
• UI 要素の仕様

出力

• コントラスト比の計算結果
• WCAG 基準への適合／不適合
• 修正の推奨事項

実施する変換

コントラスト比を計算し、WCAG AA 基準（通常のテキストは 4.5:1、大きなテキストと UI コンポーネントは 3:1）への準拠を確認します。

判断基準

PASS（良好なコントラスト）

• 通常のテキスト（< 18px）：最低 4.5:1（WCAG AA）
• 大きなテキスト（18px 以上の太字、または 24px 以上）：最低 3:1
• UI コンポーネント（ボタン、入力欄）：境界に対して最低 3:1
• フォーカスインジケーター：隣接する色に対して最低 3:1

FAIL（コントラスト不足）

• 白地に薄いグレーのテキスト（< 4.5:1）
• 明るい色に白いテキスト
• 有効な状態と見分けにくい無効状態（コントラストが強すぎる）
• 入力テキストと同じ色のプレースホルダーテキスト

コントラスト比の早見表

白地でのテキストの色	比率	AA に適合？
#000000（黒）	21:1	✓
#333333	12.6:1	✓
#666666	5.9:1	✓
#757575	4.6:1	✓（最小値）
#999999	2.8:1	✗
#CCCCCC	1.6:1	✗

よくある失敗パターン

失敗	説明	修正方法
薄いグレーのテキスト	本文に #999 またはそれより薄い色を使用	最低でも #666、推奨は #333
ゴーストテキスト	プレースホルダーが入力値と同じ色	プレースホルダーを薄い色（#999）にする
コントラストの低いプライマリカラー	ブランドカラーが白いテキストには明るすぎる	ブランドカラーを暗くするか、暗いテキストを使う
目立たないリンク	リンクがテキストとほとんど見分けられない	下線を付けるか、コントラストを高める
無効状態の混同	無効なボタンが目立ちすぎる	不透明度を 30% に下げるか、グレーを使う
薄すぎるアイコン	アイコンが薄くて見えにくい	テキストと同じ色にするか、コントラストを高める

前提条件

• カラーパレットが定義されている
• タイポグラフィのスケールが定義されている

依存関係

• build-color-palette（グレーのスケールが必要）

Refactoring UI の参考項目

• 「色付きの背景にグレーのテキストを使わない」
• 「十分なコントラストを確保する」

評価例

入力： 白い背景に #888888 の本文テキスト

評価： FAIL

• 比率：約 3.5:1
• 要件の 4.5:1 を下回っています

推奨事項： 最低でも #666666（5.9:1）に変更してください 本文には #333333 または #1A1A1A を推奨します