9
6

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 3 years have passed since last update.

JIS安全色で色指定したスタイルシート

Last updated at Posted at 2018-09-06

2018年4月20日に、JIS安全色が改正されました。塗装用、印刷用、画面表示用、のそれぞれについて、好ましい色が改正されました。

色の見え方は人により様々です。色弱の人、ロービジョンの人、白内障になっている人、などです。どのような人でも、なるべく見分けやすいように、調査して改正されました。

JIS安全色

赤、黄赤、黄、緑、青、赤紫の6色に、白と黒を加えた8色です。

スタイルシート

JIS Z 9103 色の指定値の推奨値を、スタイルシートの形式にしました。

.text-red {
    color: #ff4b00 ;
}
.text-yellowred {
    color: #f6aa00 ;
}
.text-yellow {
    color: #f2e700 ;
}
.text-green {
    color: #00b06b ;
}
.text-blue {
    color: #1971ff ;
}
.text-redpurple {
    color: #990099 ;
}
.text-white {
    color: #ffffff ;
}
.text-black {
    color: #000000 ;
}
.background-red {
     background-color: #ff4b00 ;
 }
.background-yellowred {
    background-color: #f6aa00 ;
}
.background-yellow {
    background-color: #f2e700 ;
}
.background-green {
    background-color: #00b06b ;
}
.background-blue {
    background-color: #1971ff ;
}
.background-redpurple {
    background-color: #990099 ;
}
.background-white {
    background-color: #ffffff ;
}
.background-black {
    background-color: #000000 ;
}

注意点

上記リンク先にもありますが、正確に色あいを表現するには、表示機器の設定を「sRGB, ガンマ 2.2, 6500 K」にする必要がありますのでご注意ください。

色のコントラスト比計算サイト

色のコントラスト比計算

9
6
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
9
6

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?