CSSボタン ジェネレーター

良いボタンには背景色だけでなく、ホバー状態、押下状態、見やすいキーボードフォーカスリング、読みやすい文字、なめらかなトランジションが必要です。このジェネレーターは、パディング、フォント、色、枠線、角丸、影の設定からそれらをすべて出力し、色相が変わらないようOKLCHで背景を暗くしてホバー色と押下色を計算します。WCAGに照らして文字のコントラストを判定し、通常・ホバー・アクティブ・フォーカスの状態をお使いのブラウザで並べて表示します。

使い方

1. ボタンのテキストを入力し、パディング、フォントサイズ、太さを設定します。
2. 背景色、テキスト色、枠線の色と角丸を選びます。
3. ホバー色は自動のままにするか自分で選び、フォーカスリングとトランジションを設定します。
4. CSSとHTMLをコピーする前に、コントラストの行を確認します。

計算式

ホバー = OKLCH(L − 0.08, C, H) · アクティブ = OKLCH(L − 0.12, C, H) · コントラスト比 = (L₁ + 0.05) ÷ (L₂ + 0.05)

OKLCHの明度は0から1なので、0.08は8ポイントです。暗くした色がsRGBの範囲外になる場合は、CSS Color 4の色域マッピングの方法で彩度を下げます。コントラスト比はWCAGの相対輝度で計算し、四捨五入ではなく切り捨てます。

計算例

初期設定の青 #2563EB のOKLCH明度は0.546です。8ポイント暗くするとホバー色は #0B48CF、12ポイント暗くすると押下色は #003BC1 になります。#2563EB 上の白いテキストのコントラスト比は 5.16:1 で、通常のテキストのWCAG AA（4.5:1）には適合しますが、AAA（7:1）には届きません。