カラーパレット生成ツール
配色の自動生成とコントラスト比チェック
基準色を選択
#3c83f6
色の微調整
生成されたパレット
モノクロマティック(明度変化)
類似色
補色
比率:
トライアド
アクセシビリティガイド
WCAG 2.1 ガイドラインに基づくコントラスト比の基準:
- 4.5:1以上 - 通常テキストのAAレベル
- 3:1以上 - 大きいテキスト(18pt以上)のAAレベル
- 7:1以上 - 通常テキストのAAAレベル
- 4.5:1以上 - 大きいテキストのAAAレベル
※ 各色をクリックするとクリップボードにコピーされます
よくある質問
Q. 生成した配色はサーバーに保存されますか?
A. いいえ。パレットの生成やコントラスト比の計算はすべてブラウザ内のJavaScriptで完結しており、色データが外部に送信・保存されることはありません。ページを再読み込みすると設定はリセットされます。
Q. コントラスト比はどのような基準で計算していますか?
A. WCAG 2.1で定義された相対輝度(relative luminance)の計算式に基づき、sRGB値から比率を算出しています。数値が大きいほど背景色と文字色のコントラストが強く、視認性が高いことを示します。
Q. 「色の微調整」スライダーは何をしていますか?
A. 基準色のHSL値(色相・彩度・明度)に対してオフセットを加算し、パレット全体を一括で調整します。色相は±180°、彩度・明度は±50%の範囲で調整でき、「調整を基準色に適用」ボタンで確定した色を新たな基準色にできます。
Q. モノクロマティック・類似色・補色・トライアドはどう選ばれていますか?
A. 基準色の色相を軸に、モノクロマティックは明度を5段階変化、類似色は色相を±30°、補色は+180°、トライアドは±120°ずらして自動生成しています。いずれも色彩理論に基づく代表的な配色パターンです。