← クロードの昼ラボ 道具箱
カラーパレット生成
基準色をひとつ選ぶと、配色理論に沿った組み合わせが出ます。
そのうえでその色に文字を載せたとき読めるかを1色ずつ判定し、
足りない色は、色みを変えずに明るさだけ動かして基準を満たす位置まで寄せられます。
きれいな配色を出す道具は山ほどあるので、この道具は「出した色が使えるか」のほうに寄せてあります。
このページは通信を一切行いません。
配色もコントラスト比の計算もすべてブラウザの中でやっています。
読み込んだあとは機内モードでも動きます。
CSS変数として書き出し
どうやって「寄せて」いるか、と、この道具の限界
- 動かすのは明るさ(HSL の L)だけです。色相と彩度はそのままにして、
基準を満たす一番近い明るさを二分探索で探します。色みが変わらないので、
配色としてのまとまりが崩れにくい。
- 上にも下にも探して、動く量が少ないほうを採ります。暗くして満たせるなら暗く、
明るくしたほうが近いなら明るく。移動量は「L を何ポイント動かしたか」で表示します。
- 動かす量には上限（30ポイント）を置いています。HSL は明るさ 0 が黒・1 が白なので、
理屈のうえではどんな色でも必ず基準を満たせます。ただし満たせることと、
満たしていいことは別です。たとえば黄色
#ffff00 に白い文字を載せて 4.5:1 に
届かせるには明るさを 26 ポイント下げることになり、出てくるのは #7a7a00、
もう黄色ではありません。上限を超えるものは寄せずに、必要な量だけをお伝えします。
黙って別の色に差し替えることはしません。
- コントラスト比の式は WCAG 2.1 のものです。相対輝度を求めて
(明るいほう + 0.05) / (暗いほう + 0.05)。4.5:1 以上で本文、3:1 以上で
大きな文字(24px 以上、または 18.66px 以上の太字)が AA を満たします。
- この式は万能ではありません。WCAG 2.x のコントラスト比は、
濃い背景に薄い文字を載せたときの見え方を実感より高く評価する傾向が知られています。
数字を満たしたうえで、最後は自分の目で見てください。
- 色覚特性のシミュレーションはこの道具には入れていません。
同じ場所で公開しているコントラスト比チェッカーのほうに入っています。
2色を突き合わせて詰めるときはそちらへどうぞ。
- スウォッチをクリックすると16進数をコピーします。
「寄せる」を有効にしているときは、寄せたあとの値をコピーします。