ホームページ制作、千太の絵空事

明度差と色差

明度差と色差

ここでは

• [明度について]
  
• [読みやすい明度差]
  
• [色差について]
  
• [読みやすい色差]
  
• [背景色と前景色（文字色）について]
  
  

明度について

色のRGB値を0〜255の10進数でした､値を使います。

例えば､赤#ff0000（R=255, G=0, B=0）となりますね。
[

• 明度
  

  ((R×299) + (G×587) + (B×114)) / 1000 
  

で計算します。
(グレースケールでの明度になります）
この式で、わかることですが、
赤#ff0000（R=255, G=0, B=0）
となり

(255 * 299) / 1 000 = 76.24500

緑#00ff00が（R=255, G=0, B=0）

(255 * 587) / 1 000 = 149.68500

となり､緑の#00ff00が赤より、明るい評価になってますね。

読みやすい明度差とは？ （コントラスト）

前景色（文字色）、背景色について計算し、
その差が「125」以上あるかを目安にします。

※白内障の方などを考慮すれば「158」以上ほしいです。

色差について

例えば、Rbは背景色のR、Gfは前景色のGとして

• 色差
  

  (max(Rb,Rf) - min(Rb,Rf)) + (max(Gb,Gf) - min(Gb,Gf)) + (max(Bb,Bf) - min(Bb,Bf)) 
  

として､計算することができます。

読みやすい色差

色差 が「500」以上あるかを目安にしますが、色差の読みやすさは､人によって個人差があり、一概に言えないのが実状です。

背景色と前景色（文字色）

では実際に背景色と前景色（文字色）についてみてみると

例えば、Yahooブログの場合
背景色は白#ffffffですので、これに
緑#00ff00の文字だとすると

白#ffffffが（R=255, G=255, B=255）

(255 * 1000) / 1 000 = 255

白がグレースケールで255

緑#00ff00が（R=255, G=0, B=0）

(255 * 587) / 1 000 = 149.68500

緑#00ff00が149.68500

明度差

255 - 149.68500 = 105.31500

となって125がないので、明度さ(コントラストが不足している事になりますね
→白#ffffffの背景色に、緑#00ff00の文字色.

又、コントラストが足りていても、色の組み合わせによっては、読みにくい場合があります。
例えば
緑#00ff00の背景色に、黒#000000の文字色
赤#ff0000の背景色に、白#ffffffの文字色
など、読みにくい方がいるようです。

---

背景色に文字色

顔文字や顔アイコンなどの素敵な配慮

顔文字や顔アイコンなどの素敵な配慮

以前、から顔アイコンでは少し、提案していましたが、
今回、
顔文字も含めて、少し紹介したいと思います。

どうでしょうか、
例えば、顔アイコンの場合、
だけで、表現するのではなく、意味をつけてあげるのは、
(ニッコリ）とかです。
こうすれば、
読み上げソフトなどでも、少し変ですが、なんとか意味が伝わります。

同様に
顔文字でも、
おーい　 (^O^)／ とか、読み(言葉）や、自分の表現したい意味で補助するとかです。

この）や：とかで表わされる、部分は、イメージとしてのみ意味があり、それ自体の文字の意味だけですと、
それが理解できない方にとっては、全く？の
部分になります。

あまり、かたぐるしく捉えずとも、こころの中で呟く言葉をそのまま書き加えただけで、
その記事やコメントは、さらに素敵になると思いませんか？（ニッコリ）

---

→言葉でだせる顔文字！
あ｜ か｜さ｜ た｜な｜ は｜ ま｜ や｜ わ

色の秘密（少しだけ心をつかって４）

色の秘密（少しだけ心をつかって４）

色の秘密について語ります。

皆さんは、赤色って言われて、どんな色を想像しますか？

例えば、緋色、黒っぽい赤色、朱色、
全て、赤色で想像する色に入りませんか？

人それぞれで、全くちがいます。
このように、元々、赤色という表現は、客観的な絶対的な色ではなく
その人による主観的色、つまり、相対的な色になります。

では、どのように、表現すればいいのでしょうか？
ＨＴＭＬには実は、あるんです。
つまり、ＲＧＢ表記です。

ですから１６進法で指定するその数は１６万色、
実は、この中には、自然界では存在しない色も表現できるほどの種類の色まで、含まれています。

この１６進法での数字で、色を指定してあげれば、実は、
赤色というより、はるかに、識別がはっきりするのです。

ですから、色を指定する場合、この１６進法を使って説明すれば、

赤色の、、、
ではなく、#FF0000の色の・・・と。

---

少し、わかりにくいかもしれませんが、目に障害がある方への配慮の一つの提案でもあります。

このように、色をつかう場合は、自分だけに見えている場合を想定するのではなく、
いろいろな事について、配慮すると素敵ですね。

---

少しだけ心をつかって

• 素敵な色の使い方｜色での指定｜色での強調｜[色の秘密]
  

「色による強調」（少しだけ心をつかって３）

「色による強調」（少しだけ心をつかって３）

色による指定でも少し触れていましたが、
ここでは、

強調として、使用する色について語ります。

一般的には、黒文字で書き、強調する場合赤文字を利用して記入しがちです。

それで、これは、非常に見慣れた光景になっています。

実はこの赤文字での強調が、そうならない場合があるということは、
なかなか知られていないかもしれません。

いわゆる「百人いれば百種類ある」という色覚特性の一つです。

この赤色が、黒色と非常に見分けがつきにくい方もいます。

「じゃあどうすれば？」

その場合は、私の場合だと、このように「このように文字を太く」見えるようにしています。

どうですか？。

もしくは「このように斜体に」見えるようにとすればいいのでは、、、。

もちろん、これに[色をつけて]もかまいません。

強調したい場合に、その色での強調以外の手法も併用し、それと判るような、配慮が素敵かもしれませんね。

(ですが、、、。この方法だけでは少し、、、、と思い。「太字の使い方」の秘密)

---

少しだけ心をつかって

• 素敵な色の使い方｜色での指定｜[色での強調]｜色の秘密
  
  

「太字の使い方」の秘密

「色での指定」（少しだけ心をつかって２）

「色での指定」（少しだけ心をつかって２）

これはこのブログに限ったことではありませが、
説明する場合などに
色での指定をやめてください。

「はっ？」

そうです。

例えば、説明用に、赤色と緑色の文字で記入し、

赤色の部分の文字をとか、
緑色の部分の文字をとか、
色でに指定しないようにしましょう。

なぜなら、この色覚に対応できない人も少なからずいるのです。
(２０人に一人と言われています)
又、別の色覚の特性を持った人もいます。
細かくいえば、「１００人いれば百種類」の色覚の特性があります。
つまり、一人一人は全く違うのです。

それを大まかにやっているにすぎません。

じゃあどのようにすれば？

例えば形などで表現したり、この場合ですと文字列に変化をつけるといいでしょう。
指定したい文字を
「」でくくってその後に数字で(１)とかです

「笑っている(1)」
「笑っている(2)」

そう記事の中で注釈をつけるようにです。

(1)の「笑っている」の部分では、、、、、、。
(2)の「笑っている」部分では、、、、、。
というようにです。

説明をするような文の場合このようにすればいいはずです。

だからといって、色を使ってはいけないと言うわけではありませんよ。

それが、なくても、判るように書くのです。

少しの心づかいで、あなたの内面が輝くことでしょう。

---

少しだけ心をつかって

• 素敵な色の使い方｜[色での指定]｜色での強調｜色の秘密