パレットバランサー
Check palette contrast against a base color and auto-suggest accessible tweaks.
Summary
No colors meet target
No adjustments needed
Results
Add HEX colors to evaluate contrast.
Tips
- Keep at least AA (4.5:1) for text on brand surfaces.
- Test both light and dark modes—base color shifts can change results.
- Export CSS variables or JSON to sync with design systems.
ツール概要
ブランドパレットの各色を指定した背景色と比較し、目標コントラスト比を素早く満たすための調整案を提示します。
使い方
- 基準となる背景色と目標コントラスト比を設定。
- 評価したいHEXカラーやカンマ区切りリストを入力。
- 提案された調整値を確認し、CSS/JSONトークンをエクスポート。
活用例
- ダッシュボードやUIシェルでブランドカラーがAA基準を満たしているか確認。
- キャンペーン向けにアクセシブルな代替色パレットを提案。
- ダークモード配色をレビュー前に検証。
ポイント・知識
- 実際のコンポーネントでも最終色を確認し、オーバーレイによる変化をチェック。
- デザイントークンと同期しておくと色のズレを防げます。
- JSON出力をQAやデザインシステムチームと共有。