relative luminous color wheel

解説動画

　《Relative Luminous Color Wheel / 相対輝度ベースのHSLカラーピッカー》: relative-luminous-color-wheel.vercel.app はWCAGコントラスト基準の算定に使われている相対輝度に基づくカラーピッカーです。

　ホイール上のすべての色が同一の相対輝度を共有するため、色相や彩度を動かしてもコントラスト比が変わりません。デザイナーはあらかじめ達成するべきコントラスト比を設定しさえすれば、そのホイールに表示されている色のうち、最も魅力的な色を選択するというシンプルかつ感性的な仕事に集中することができるのです。

　また、本アプリでは任意のWCAG 2.2基準比ターゲットをロックすることができます。コントラストロック機能を使うと、TEXT/BGカラーのうち触っていない方のピッカーがユーザの設定に自動追従し、コントラスト基準を達成する閾値ちょうどに2つの色の関係を保ちます。なお、本アプリはWCAG 2.2に加え、APCA（Advanced Perceptual Contrast Algorithm）のLightness contrast（Lc 45〜90）ターゲットにも対応しています。

　選んだTEXT/BGカラーはColor Paletteに保存することができ、作成したカラーパレットは最新のW3C Design Tokens仕様で書き出すことができます。書き出しはW3C Design Tokensに準拠したjson形式の他、CSSカスタムプロパティやTailwind v4の@theme形式に対応しており、色表現の形式もOKLCH・HEX・RGBから選択することができます。

　なお起動時はC型色覚が適用されていますが、色覚シミュレーションから3種の色覚タイプ（Protanopia、Deuteranopia、Tritanopia）を選ぶことで、テーマ・ホイール・スライダーを含むアプリの表示全域において複数の色覚タイプをシミュレートすることができます。

　アプリへのリンク: relative-luminous-color-wheel.vercel.app