読みやすい文字色を作る

Sass Compass

背景色を決めるのにはそれほど困らないけど、それに対する文字色を選ぶのはなかなか大変だと個人的には思ってます。

上記の記事によると、（白内障の人も含めて）読みやすい文字色っていうのは背景色とのコントラストがパーセンテージで言うと62%以上になるそうです。

というわけで、コントラストを考えて色を算出してくれる関数を2つと、デバッグ用にコントラストをチェックしてくれる関数を作ってみました。

単色から対となる読みやすい色を作る関数（Compass依存）

@function readable-color($color, $contrast: 62%, $invert-contrast: false, $complement: false) {
  $invert-contrast: if($invert-contrast, -1, 1);
  $base: if($complement, complement($color), mix(contrast-color($color), $color, 50%));
  $lightness: lightness($color);
  $lightness: min(100%, max(0%, $lightness + $contrast * $invert-contrast * if($lightness < 50%, 1, -1)));

  @return change-color($base, $lightness: $lightness);
}

$colorに背景色を指定してやれば、$contrastで指定したコントラスト差になるように明度を調整して色を作ってくれます。

同色寄りでなく補色寄りの色にしたい場合は$complementをtrueにすればOKです。

背景色の明度が50%付近で、何も指定しないと暗くなるけど、どうしても明るくしたい、とかの場合には$invert-contrastをtrueにしてやってください。

contrast-color関数だけCompass依存なのでCompassを使わない場合は適当にでっち上げてくれれば良いと思います。

基本色と背景色から読みやすい色を作る関数（Compass依存）

@function readable-mix-color($base, $bg, $contrast: 62%, $invert-contrast: false) {
  $invert-contrast: if($invert-contrast, -1, 1);
  $base: mix($base, $bg, 50%);
  $lightness: lightness($bg);
  $lightness: min(100%, max(0%, $lightness + $contrast * $invert-contrast * if($lightness < 50%, 1, -1)));

  @return change-color($base, $lightness: $lightness);
}

ベースとなる色と背景色を合成・明度調整して良い感じになった色を返します。

この関数を使ってリンク色とかを作ったりするなら、コントラストを調節しないと、普通の文字色とリンク色とでコントラストが近すぎて区別が付きづらくなるので、少しコントラストを減らしたほうが良いです。

コントラストのチェック用の関数

@function check-contrast($color1, $color2) {
  $contrast: abs(lightness($color1) - lightness($color2));

  @if $contrast >= 50% and $contrast < 62% {
    @warn "Contrast is somewhat low. It recommends 62% or more. (Contrast: #{$contrast})";
    @return false;
  } @else if $contrast < 50% {
    @warn "Contrast is too low. (Contrast: #{$contrast})";
    @return false;
  }

  @return true;
}

50%未満で低すぎ、62%未満でやや低いとの旨の警告を出します。