USWDSカラーパレットとは？
USWDS（U.S. Web Design System）は、アメリカ連邦政府が策定したWebデザインシステムです。アクセシビリティとユーザビリティを最優先に設計されており、その中核となるカラーシステムは、多くのデザイナーやエンジニアに参考にされています。
本ツールでは、USWDSのシステムカラートークンを一覧で確認し、ワンクリックでHEXコードをコピーできます。
なぜUSWDSが注目されるのか
♿ アクセシビリティ対応
USWDSのカラーパレットは、WCAGのコントラスト基準を満たすように設計されています。
| レベル | コントラスト比 | 用途 |
|---|---|---|
| AA | 4.5:1以上 | 通常のテキスト |
| AAA | 7:1以上 | より高いアクセシビリティ |
各色には「グレード」が付与されており、数字が大きいほど暗い色になります（例: gray-10 → gray-90）。異なるグレード間の組み合わせで、必要なコントラスト比を簡単に確保できます。
🎨 体系的なカラーファミリー
USWDSのカラーは、カラーファミリー × グレードの組み合わせで構成されています。
- ニュートラル系: Gray, Gray Cool, Gray Warm
- プライマリ系: Blue, Blue Cool, Blue Warm
- アクセント系: Mint, Cyan, Violet 等
- セマンティック系: Red (エラー), Green (成功), Gold (警告)
これにより、統一感のあるカラースキームを構築しやすくなっています。
このツールでできること
🔍 カラーファミリーでフィルタ
30以上のカラーファミリーから目的の系統を選択。Gray系だけ、Blue系だけといった絞り込みができます。
📋 ワンクリックでコピー
色見本をクリックするだけでHEXコードがクリップボードにコピーされます。CSSやFigmaへの転記がスムーズに行えます。
🌓 ダーク/ライトモード対応
パレットはライトモードでもダークモードでも視認しやすい表示になっています。実際のデザインに近い環境で色を確認できます。
USWDSカラーの命名規則
USWDSのカラートークンは以下の規則で命名されています。
{color-family}-{grade}{vivid}
例:
blue-50v → Blue系、グレード50、Vivid（鮮やかな）バリエーション
gray-cool-30 → Gray Cool系、グレード30
mint-cool-40 → Mint Cool系、グレード40
グレード一覧
| グレード | 明るさ |
|---|---|
| 5 | 非常に明るい（ほぼ白） |
| 10 | 明るい |
| 20 | 明るめ |
| 30 | やや明るい |
| 40 | 中間（明るめ） |
| 50 | 中間 |
| 60 | やや暗い |
| 70 | 暗めの中間 |
| 80 | 暗い |
| 90 | 非常に暗い（ほぼ黒） |
Vividバリエーション
一部のカラーには末尾にvが付いた**Vivid（鮮やかな）**バリエーションがあります。ボタンやアクセントカラーなど、目立たせたい要素に適しています。
デザインでの活用例
Webサイトのカラースキーム構築
- ニュートラル系（Gray Cool など）をベースカラーに
- ブランドに合ったプライマリカラーを1種選択
- 成功・エラー・警告用のセマンティックカラーを追加
Tailwind CSSのカスタムカラー設定
:root {
--primary: #0076d6; /* USWDS Blue 50v */
--success: #4d8055; /* USWDS Green Cool 50 */
--error: #d54309; /* USWDS Red Warm 50v */
}
Figmaデザインシステムへの取り込み
HEXコードをコピーして、Figmaのローカルスタイルとして登録。チーム全体で統一されたカラーパレットを使用できます。
USWDSの公式リソース
より詳しい情報は、公式ドキュメントを参照してください。
まとめ
USWDSカラーパレットツールは、アクセシビリティに配慮したカラー選定を効率化するためのリファレンスツールです。政府系サイトのデザイン基準に準拠した色を使うことで、誰にとっても見やすいWebサイトが実現できます。
ぜひプロジェクトのカラースキーム設計にお役立てください。