_readable-color

背景色によって見やすい文字色を算出します。

引数型初期値説明
_readable-color($method, $background-color, $light-text-color, $dark-text-color, $threshold);
$methodString用いる手法
luminanceWCAG が公開している色の輝度を使った手法
brightnessW3C が公開している色の光度を使った手法
differenceW3C が公開している色の差を使った手法
$background-colorColor背景色
$light-text-colorColor#fff白系の文字色
$dark-text-colorColor#000黒系の文字色
$thresholdNumber後述の説明を参照$method 引数に brightness を指定した場合の閾値（0〜255までの整数値）

色の輝度

$method 引数に luminance を指定すると、色の輝度を使った手法が用いられます。

#087f5b
#099268
#0ca678
#12b886
#20c997
#38d9a9
#63e6be
#96f2d7
#c3fae8
#e6fcf5
<div class="chip-1">#087f5b</div>
<div class="chip-2">#099268</div>
<div class="chip-3">#0ca678</div>
<div class="chip-4">#12b886</div>
<div class="chip-5">#20c997</div>
<div class="chip-6">#38d9a9</div>
<div class="chip-7">#63e6be</div>
<div class="chip-8">#96f2d7</div>
<div class="chip-9">#c3fae8</div>
<div class="chip-10">#e6fcf5</div>

$colors: (
  #087f5b,
  #099268,
  #0ca678,
  #12b886,
  #20c997,
  #38d9a9,
  #63e6be,
  #96f2d7,
  #c3fae8,
  #e6fcf5,
);

.chip {
  @each $color in $colors {
    &-#{index($colors, $color)} {
      color: _readable-color('luminance', $color);
      background-color: $color;
    }
  }
}

.chip-1 {
  color: #fff;
  background-color: #087f5b;
}
.chip-2 {
  color: #000;
  background-color: #099268;
}
.chip-3 {
  color: #000;
  background-color: #0ca678;
}
.chip-4 {
  color: #000;
  background-color: #12b886;
}
.chip-5 {
  color: #000;
  background-color: #20c997;
}
.chip-6 {
  color: #000;
  background-color: #38d9a9;
}
.chip-7 {
  color: #000;
  background-color: #63e6be;
}
.chip-8 {
  color: #000;
  background-color: #96f2d7;
}
.chip-9 {
  color: #000;
  background-color: #c3fae8;
}
.chip-10 {
  color: #000;
  background-color: #e6fcf5;
}

色の輝度を使った手法では、濃いめの色でも文字色として黒が選択されています。

色の光度

$method 引数に brightness を指定すると、色の光度を使った手法が用いられます。

#087f5b
#099268
#0ca678
#12b886
#20c997
#38d9a9
#63e6be
#96f2d7
#c3fae8
#e6fcf5
<div class="chip-1">#087f5b</div>
<div class="chip-2">#099268</div>
<div class="chip-3">#0ca678</div>
<div class="chip-4">#12b886</div>
<div class="chip-5">#20c997</div>
<div class="chip-6">#38d9a9</div>
<div class="chip-7">#63e6be</div>
<div class="chip-8">#96f2d7</div>
<div class="chip-9">#c3fae8</div>
<div class="chip-10">#e6fcf5</div>

$colors: (
  #087f5b,
  #099268,
  #0ca678,
  #12b886,
  #20c997,
  #38d9a9,
  #63e6be,
  #96f2d7,
  #c3fae8,
  #e6fcf5,
);

.chip {
  @each $color in $colors {
    &-#{index($colors, $color)} {
      color: _readable-color('brightness', $color);
      background-color: $color;
    }
  }
}

.chip-1 {
  color: #fff;
  background-color: #087f5b;
}
.chip-2 {
  color: #fff;
  background-color: #099268;
}
.chip-3 {
  color: #fff;
  background-color: #0ca678;
}
.chip-4 {
  color: #000;
  background-color: #12b886;
}
.chip-5 {
  color: #000;
  background-color: #20c997;
}
.chip-6 {
  color: #000;
  background-color: #38d9a9;
}
.chip-7 {
  color: #000;
  background-color: #63e6be;
}
.chip-8 {
  color: #000;
  background-color: #96f2d7;
}
.chip-9 {
  color: #000;
  background-color: #c3fae8;
}
.chip-10 {
  color: #000;
  background-color: #e6fcf5;
}

また、この手法では閾値を指定でき、初期値は $light-color-text と $dark-color-text 引数の値の中間となっています。

#087f5b
#099268
#0ca678
#12b886
#20c997
#38d9a9
#63e6be
#96f2d7
#c3fae8
#e6fcf5
<div class="chip-1">#087f5b</div>
<div class="chip-2">#099268</div>
<div class="chip-3">#0ca678</div>
<div class="chip-4">#12b886</div>
<div class="chip-5">#20c997</div>
<div class="chip-6">#38d9a9</div>
<div class="chip-7">#63e6be</div>
<div class="chip-8">#96f2d7</div>
<div class="chip-9">#c3fae8</div>
<div class="chip-10">#e6fcf5</div>

$colors: (
  #087f5b,
  #099268,
  #0ca678,
  #12b886,
  #20c997,
  #38d9a9,
  #63e6be,
  #96f2d7,
  #c3fae8,
  #e6fcf5,
);

.chip {
  @each $color in $colors {
    &-#{index($colors, $color)} {
      color: _readable-color('brightness', $color, $threshold: 150);
      background-color: $color;
    }
  }
}

.chip-1 {
  color: #fff;
  background-color: #087f5b;
}
.chip-2 {
  color: #fff;
  background-color: #099268;
}
.chip-3 {
  color: #fff;
  background-color: #0ca678;
}
.chip-4 {
  color: #fff;
  background-color: #12b886;
}
.chip-5 {
  color: #fff;
  background-color: #20c997;
}
.chip-6 {
  color: #000;
  background-color: #38d9a9;
}
.chip-7 {
  color: #000;
  background-color: #63e6be;
}
.chip-8 {
  color: #000;
  background-color: #96f2d7;
}
.chip-9 {
  color: #000;
  background-color: #c3fae8;
}
.chip-10 {
  color: #000;
  background-color: #e6fcf5;
}

閾値を変えると、微調整できます。

色の差

$method 引数に difference を指定すると、色の差を使った手法が用いられます。

#087f5b
#099268
#0ca678
#12b886
#20c997
#38d9a9
#63e6be
#96f2d7
#c3fae8
#e6fcf5
<div class="chip-1">#087f5b</div>
<div class="chip-2">#099268</div>
<div class="chip-3">#0ca678</div>
<div class="chip-4">#12b886</div>
<div class="chip-5">#20c997</div>
<div class="chip-6">#38d9a9</div>
<div class="chip-7">#63e6be</div>
<div class="chip-8">#96f2d7</div>
<div class="chip-9">#c3fae8</div>
<div class="chip-10">#e6fcf5</div>

$colors: (
  #087f5b,
  #099268,
  #0ca678,
  #12b886,
  #20c997,
  #38d9a9,
  #63e6be,
  #96f2d7,
  #c3fae8,
  #e6fcf5,
);

.chip {
  @each $color in $colors {
    &-#{index($colors, $color)} {
      color: _readable-color('difference', $color);
      background-color: $color;
    }
  }
}

.chip-1 {
  color: #fff;
  background-color: #087f5b;
}
.chip-2 {
  color: #fff;
  background-color: #099268;
}
.chip-3 {
  color: #fff;
  background-color: #0ca678;
}
.chip-4 {
  color: #fff;
  background-color: #12b886;
}
.chip-5 {
  color: #000;
  background-color: #20c997;
}
.chip-6 {
  color: #000;
  background-color: #38d9a9;
}
.chip-7 {
  color: #000;
  background-color: #63e6be;
}
.chip-8 {
  color: #000;
  background-color: #96f2d7;
}
.chip-9 {
  color: #000;
  background-color: #c3fae8;
}
.chip-10 {
  color: #000;
  background-color: #e6fcf5;
}