opacityやbrightnessを使わないほうが良い理由
Webサイトにおいて、CSSの:hoverによるマウスオーバー時のボタンの背景色変更は基本中の基本です。
しかし、多くのエンジニアが無意識に使っている「opacity」や「filter: brightness()」は、実は色のアクセシビリティやデザインの質を損なう原因になっています。
opacity（不透明度）の問題
opacityを下げると、ボタンの下にある背景色が透けて混ざってしまいます。
白い背景なら明るくなりますが、暗い背景や画像の上では意図しない濁った色になります。
さらに、中の文字まで薄くなり、コントラスト比が下がって読みづらくなります。
CSS
.button {
--button-bg: #007bff;
background: var(--button-bg);
transition: background 0.2s;
width: 100%;
max-width: 200px;
padding: 10px;
color: white;
border: none;
border-radius: 6px;
cursor: pointer;
font-weight: bold;
@media (hover: hover) {
&:hover {
opacity: 0.8;
}
}
}brightness（明度）の問題
filter: brightnessで明度を変更する処理は、色を白または黒に近づけるものです。
これにより、元の色が持っていた「鮮やかさ（彩度）」が失われ、くすんだ印象（グレーがかった色）になってしまいます。
また、filter: brightnessだとボタンのテキストの色への影響も大きいです。
サンプルのfilter: brightness(0.8)を見ると、テキストの色が暗くなってしまうことがわかります。
CSS
@media (hover: hover) {
&:hover {
filter: brightness(0.8);
}
}CSSの:hoverのfilter: brightnessの背景色変更サンプル
oklchの場合
oklchを使用すれば人間が感じる「直感的な明度」だけを正確に操作できます。
彩度を維持したまま明るさだけを変えられるため、マウスオーバーしてもきれいな状態のまま変更できます。
CSS
@media (hover: hover) {
&:hover {
background-color: oklch(from var(--button-bg) calc(l * 0.8) c h);
}
}まとめ
- opacityは背景に左右され、文字まで薄くなる。
- brightnessは色がグレーに濁り、文字色まで変わりやすい。
- oklchは元の色の美しさを保ったまま、自然な明度に変更できる。
