WCAG カラー策定ツール作りました！

WCAG準拠の配色設計を、迷わず・早く・気持ちよく。

コントラストと色理論を一体化した、カラースキーム設計ツールを公開しました。アクセシブルな配色を作るとき、地味に時間を持っていかれるのがコントラスト比確認と配色の整合性です。前景色と背景色の組み合わせを試し、基準を満たしているかを調べ、ついでに見た目の調和も崩さないように整える。これ、やってることは単純なのに、手数が多いと感じていました。

そこで、Web Content Accessibility Guidelines（WCAG）に準拠したカラースキームを設計するためのインタラクティブツールを作りました。狙いは一つ。「調べる・判断する・直す」を、作業ではなく設計にすることです。

このツールでできること

コントラスト比をリアルタイムで計算

前景色・背景色を選ぶだけで、WCAGのコントラスト比を自動計算します。OKかNGかを押し問答にせず数値で即決できます。

WCAG準拠レベル（A／AA／AAA）WCAG 2.0／2.1／2.2 を即判定

レベルごとの合否をその場で表示できるので判断精度が高いです。また、ツール内でバージョンを切り替えての確認も可能です。(コントラスト比の基準自体は、いずれのバージョンでも同一です)

ワンクリック自動色調整

指定した準拠レベルに合わせて、色相・彩度は維持しながら輝度だけを調整し、基準を満たす方向へ自動修正します。「雰囲気は好きなのに基準に届かない」問題を、最短で救います。

色理論ベースのカラーハーモニー提案

補色・類似色・トライアド・分裂補色など、色相環の基本ロジックに基づいて配色候補を自動提案。
しかも各候補は、コントラスト比とWCAG合否をセットで確認できます。

リアルタイムプレビュー

実際のテキスト表示で見え方を確認できます。数字だけでは判断しづらい体感を、最後に目で確かめられます。

エクスポート＆コピー

作成したカラースキームはJSON形式で保存でき、各カラーコードはワンクリックでコピー可能。
デザインシステムやCSS変数への統合を容易にします。

---

WCAGのコントラスト基準（本ツールでの判定ルール）

• レベルA
  • 大きなテキスト：3:1 以上
  • 通常テキスト：基準なし
• レベルAA（推奨）
  • 大きなテキスト：3:1 以上
  • 通常テキスト：4.5:1 以上
• レベルAAA
  • 大きなテキスト：4.5:1 以上
  • 通常テキスト：7:1 以上

※大きなテキスト：18pt（24px）以上、または14pt（18.5px）以上の太字

自動修正の考え方

このツールの自動修正は、配色の個性を壊しにくい方法を採用しています。

• 背景色の輝度を分析
• 目標コントラスト比を計算
• 前景色のHSLを調整（色相と彩度を維持し、輝度のみ変更）
• 基準を満たすまで反復

こんな人に向いています

• WCAG対応の配色を、短時間で確実に決めたいデザイナー／ディレクター
• 実装側として、CSS変数やテーマカラーを安全に運用したいエンジニア

アクセシビリティは「正しさ」の話に見えますが、実態はもっとシンプルで、読みやすさは気持ちよさです。
迷わない設計は速い。このツールは、その当たり前を、ちゃんと手元で回せるようにするための道具です。配色に迷ったときに使ってみてください。