SCSSで背景色の明るさで文字色を自動で設定する

CSSでレイアウトを設定している時に
「背景色と文字色が似ていて、テキストが読みにくなぁ…」と思うことありませんか？

また、W3Cのウェブアクセシビリティでは背景色と文字色で一定のコントラスト比を維持することが推奨されています。
W3Cのガイドライン: https://waic.jp/docs/WCAG20/Overview.html#visual-audio-contrast

これにより、アクセシビリティを重視するWebコンテンツの場合は厳格なチェックが必要な場合もあります。

W3Cとは…
World Wide Web Consortium（ワールド・ワイド・ウェブ・コンソーシアム）は、
World Wide Webで使用される各種技術の標準化を推進するために設立された
標準化団体、非営利団体
W3C（ダブリュースリーシー）と略称される。
https://www.w3.org/

背景色と適切な文字色をその都度設定していくのがベストですが、
パーツセットなどを作成しているときは一括で文字色を指定したい場合もあるかと思います。

そんな時に使いたい、背景色の明るさを調べて自動で文字色を決めてくれるSCSSの書き方です。

背景色と文字色のコントラストが低いと…

背景色と文字色のコントラストが低いと、この様にテキストが見えなくなってしまいます。

Photoshopなどのデザインツールを使って１つ１つコントラストを確認するのもちょっと面倒…

そんな時はSCSSで色の明暗を判定して、自動で文字色を設定できるようにしましょう

色の明暗を判定する

@function _text-color($color) {
  $r: red($color);
  $g: green($color);
  $b: blue($color);
  $brightness: (($r * 299) + ($g * 587) + ($b * 114)) / 1000;

  @if($brightness >=128) {
    // 明るい
    @return black;
  }
  @else {
    // 暗い
    @return white;
  }
}

明暗の判定にはこちらのコードを使います。

SCSSで関数を設定

SCSSではファイル内で関数（function）を利用することができます

@function 関数名(引数) {
  ...ここに処理を記述
}

基本的な記述のカタチはこちら。
この中に明暗判定の処理を書いて行きます

16進数のカラーコードをrgb値に変換

まずは、16進数のカラーコードを rgb値に変換します。

まずは 引数（$color） でベースカラー（16進数のカラーコード）を受け取ります。

$r: red($color);
$g: green($color);
$b: blue($color);

red($color) は16進数カラーコードからRGB値のR値（赤）を返します。

同じ様に、Green・Blueもそれぞれ取得し、変数に格納しておきます。

色の明度を調べる

$brightness: (($r * 299) + ($g * 587) + ($b * 114)) / 1000;

この行で、ベースカラーの明度を調べます。
こちらの計算式はW3Cで定義されている計算式を利用しています

計算した結果の数値（整数）は変数（$brightness）に格納しています

明暗の結果から文字色を決定する

先程の計算の結果 $brightness を使って、文字色を決定していきます。

@if($brightness >=128) {
    //明るい
    @return black;
}
@else {
    //暗い
    @return white;
}

この例では、 $brightness が　128以上の場合は明るい色と判断し、文字色を black を返します。
反対に、数値が 128よりも小さい場合は暗い色と判断し、文字色は white を返します。

実行結果

See the Pen brightness by subaru (@subaru_works) on CodePen.

実行結果はこのようになります。

背景色が暗い要素の文字色は白色に…
逆に背景色が明るい要素は文字色が黒色になっています

応用編

先程のコードでは文字色は黒か白のみとなっていましたが
文字色を黒・白以外にしたい時は次のような方法で設定することもできます

背景色から文字色を作る

See the Pen brightness by subaru (@subaru_works) on CodePen.

この例では、背景色の明暗を調べた後…

背景色が暗い場合は、文字色をその背景色を60%明るくした色にし、
背景色が明るい場合にはその背景色を60%暗くした色に設定するようにしました。

背景色の補色で文字色を設定する

See the Pen brightness by subaru (@subaru_works) on CodePen.

こちらの例では、背景色の補色を取得し、
さらに背景色の明暗に合わせて補色の明暗も調整しています。

まとめ

今回はSCSSを使って、特定の色の明暗を求めて文字色を自動で設定する方法をご紹介しました。

SCSSの記述は少しややこしくなりますが、この方法を使ってスタイルを設定すると
制作途中で色が増えたり、たくさんのカラーバリエーションを作る必要がある場合に
1つのコードで対応することができます。

ぜひ、色々な組み合わせで作ってみてください