UIデザイン用のアクセシブルなカラーパレットを自動生成するツール -Accessible Color Palette Generator

Post on:2025年4月23日

sponsors

UIデザイン用のカラーパレットを作成するのは、簡単そうに思うかもしれません。しかし、アクセシビリティの要件を満たし、ブランドのアイデンティティやスケールのバランスが取れたカラーパレットを作成するには手間と時間がかかります。ほとんどのツールを使用しても、これらの要件を満たせるものは数が少ないです。

UIデザイン用のアクセシブルで、ライトモードとダークモードにも対応、アクセントカラーやニュートラルカラーでスケールの取れたバリエーションも自動生成してくれる便利ツールを紹介します。

Accessible Color Palette Generator

Accessible Color Palette Generatorは、UIデザイン用のアクセシブルなカラーパレットを自動生成する無料ツールです。Radix UIのカラーパレットからインスピレーションを得ており、WCAG 2.1に基づいてアクセシブルな色の組み合わせを生成します。

背景のカラー
デフォルトのアクセントカラー
落ち着いたアクセントカラー
デフォルトのニュートラルカラー
落ち着いたニュートラルカラー

使い方は簡単で、左の「Settings」にアクセントカラー（ブランドカラー）を指定するだけです。

生成されたカラーパレット: ライトモード

入力したカラーを元にシードカラー（Seed Color）が決まり、キャンバスとカードの背景色が生成されます。アクセントカラーはボタンやリンクなどの実行可能な要素に注目を集めるため、これらを配置するキャンバスやカードの背景には十分なコントラストが必要です。

アクセントカラーはデフォルトの色以外にも、控えめなアクセントとしてWCAG 2.1 AAの最小コントラストを満たす不透明度を調整したカラーも必要になります。さらに、不透明度を調整したカラーと同じコントラストを持つニュートラスのカラーも生成します。左半分が不透明度を調整したカラーで、右半分がそれと同じ色合いになるように調整されたカラーです。