なぜWCAGは4.5:1のコントラストを要求するのですか？
この比率はAA標準で、中程度の低視力のユーザーが補助機器なしでもテキストを読める最低限の値です。より厳格なAAA基準は7:1です。
カラーピッカー
HEX・RGB・HSL色コード変換
コントラスト比
⬜ ⬛
補色 & 類似色
カラーピッカー
HEXとRGBどちらを使うべきですか？
HEXが簡潔でよく使われます。透明度が必要な場合はrgba()を使用してください。例えばrgba(0,0,0,0.5)は50%透明な黒です。
ダークモードの色をどう管理しますか？
CSSカスタムプロパティと @media (prefers-color-scheme: dark) を組み合わせます。ライトモードで変数を定義し、ダークモードのメディアクエリで上書きする方法が一般的です。
色コードとは？HEX・RGB・HSLの違い
HEX、RGB、HSLはコンピュータで色を表現する3つの方式です。HEX（例: #FF5733）はウェブで最も広く使われ、RGB（例: rgb(255,87,51)）は赤・緑・青の光の混合、HSL（例: hsl(11,100%,60%)）は色相・彩度・明度で表現します。どれも同じ色を異なる方法で記述しているだけです。
WCAGコントラスト比とは？
WCAG（ウェブコンテンツアクセシビリティガイドライン）のAA基準では、通常のテキストで4.5:1以上のコントラスト比が必要です。低視力のユーザーが補助機器なしでもテキストを読める最低限の基準で、AAA基準はさらに厳しく7:1以上を求めます。デザイン時にコントラスト比を確認することがアクセシブルなUI設計の第一歩です。
HSL：人間に直感的なカラーモデル
HSLは色相（Hue: 0-360°）・彩度（Saturation: 0-100%）・明度（Lightness: 0-100%）で色を表現します。ブランドカラーの明るいバリエーションを作るには明度を上げるだけで、RGBのように複雑な計算が不要です。色の調整が直感的なため、デザインシステムの構築にも広く活用されています。
補色と類似色の活用
補色は色相環で180°反対の色（青とオレンジ、赤と緑など）で、強いコントラストと視覚的な緊張感を生み出します。類似色は隣接する色（青、青紫、紫など）で、調和のとれた落ち着いた配色を作ります。優れたUIカラーシステムはプライマリカラー・アクセントカラー（補色）・ニュートラル・セマンティックカラーで構成されます。
CSSカスタムプロパティによる色管理
CSSカスタムプロパティ（変数）を使えば色を一元管理できます。--color-primary: #2563EB; のように宣言し、全サイトで background-color: var(--color-primary); として使用します。ブランドカラーを変更する際は1箇所を変えるだけでOK。@media (prefers-color-scheme: dark) でダークモードも変数で管理できます。
よくある質問
HEXとRGBどちらを使うべきですか？
HEXが簡潔でよく使われます。透明度が必要な場合はrgba()を使用してください。例えばrgba(0,0,0,0.5)は50%透明な黒です。
なぜWCAGは4.5:1のコントラストを要求するのですか？
この比率はAA標準で、中程度の低視力のユーザーが補助機器なしでもテキストを読める最低限の値です。より厳格なAAA基準は7:1です。
ダークモードの色をどう管理しますか？
CSSカスタムプロパティと @media (prefers-color-scheme: dark) を組み合わせます。ライトモードで変数を定義し、ダークモードのメディアクエリで上書きする方法が一般的です。