補色、コントラスト比を活用して見やすい色使いを勉強してみた

スポンサーリンク
css

補色の特徴

  • 補色とは反対側の色のこと
  • 赤系と緑系、青系と黄色系が補色
  • 補色は互いの色を引き立て合う相乗効果がある
  • 明度が同じような補色同士を組合せた場合はハレーションを引き起こして、目がチカチカしてしまう。

参照:
https://goriarte.com/hosyokuimi/
https://ja.wikipedia.org/wiki/%E8%A3%9C%E8%89%B2

補色の見つけ方

以下ツールが使いやすそうだったので使ってみました。
カラーコード変換ツール Ver3
https://syncer.jp/color-converter

KeywordかHexに値を入力すると自動的に補色が表示されます。

実際に一つの色を例にして作ってみる

実際に補色関係の色を特定してタイトルを作ってみます。
基準にする背景色は#aaa5d1でやってみます。

#aaa5d1

#aaa5d1を入力すると補色も表示される

補色の色は#ccd1a5とわかったのでこれをタイトル色にして見やすさを見てみます。

<div class="complementaryColors">
<div class="complementaryColors1
">
  <p>app crafts</p>
</div>
</div>
@import url('https://fonts.googleapis.com/css2?family=Libre+Baskerville:ital@1&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Montserrat&display=swap');

.complementaryColors{
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-bottom:30px;
  width:100%;
  font-family: 'Libre Baskerville', serif;
}

.complementaryColors1{
  background-color:rgba( 170,165,209 , 1 );
  color:rgba( 198,203,165 , 1 );
  font-size:70px;
  text-align:center;
  padding:50px;
}

結果

なんか見ずらいような気がすると思ったのでもう少し調べて見た結果、コントラスト比も意識しなければいけないものであることを知り、確認してみました。

確認のためのツールは以下を使用しました。
https://syncer.jp/color-converter

基準的には4.5以上くらいあれば良さそう。

テキスト及び文字画像の視覚的提示に、少なくとも 4.5:1 のコントラスト比がある。 ただし、次の場合は除く: 大きな文字: サイズの大きなテキスト及びサイズの大きな文字画像に、少なくとも 3:1 のコントラスト比がある。

https://weba11y.jp/know-how/guidelines/color-contrast-ratio


コントラスト比が4.5を越えるような色の関係にするように背景色のの明度を段階的に変更していきました。
まずコントラスト比2.8。確かに先程のよりちょっと見やすいかも。


次にコントラスト比4.2。基準地近くなので見やすい。

最後にコントラスト比6.2。当然な気もするが比率が高いほどやはり見やすい。

完成品

色の比較をまとめたコードが以下になります。

See the Pen
by Seiya Takahashi (@takasei)
on CodePen.

補色とコントラスト比を意識することでより見やすい色使いができることを学べました。
読んでいただきありがとうございました!

cssデザイン
スポンサーリンク
app crafts

コメント

タイトルとURLをコピーしました