技術リファレンス&アーキテクチャガイド

カラーパレット抽出&コントラストチェッカー — リファレンスガイド

WCAG 2.1アクセシビリティ準拠のコントラスト比検証と、調和のとれた配色パレットを即座に生成します。

主要パラメータ&設定項目

ベースカラーstring

パレット生成の基準となるメインカラー(HEXまたはRGB)を指定します。

初期値: #4f46e5
配色ルールstring

補色、類似色、三色配色、モノクロームなどの調和モデルを選択します。

初期値: analogous

プロの活用テクニック&推奨設定

WCAG AAAコントラスト比の確保

本文テキストと背景色のコントラスト比は7:1以上(AAA基準)を維持することで、あらゆる環境下での視認性を保証できます。

よくあるトラブルと解決策

コントラスト比がAA基準を下回る警告が出る

輝度の高いアクセントカラーは背景色として使用し、テキストには暗度の高い色を選択してコントラストを改善してください。

よくある質問 (FAQ)

生成したカラーコードはCSS変数としてエクスポートできますか?▼

はい。HEX、RGB、HSL、OKLCH、およびTailwind CSS設定フォーマットでワンクリックコピーが可能です。

関連するおすすめ開発ツール

すべてのツール →