このエントリーをはてなブックマークに追加

angelolucas / Pixabay

 

ブログの配色は、すごく悩みますよね？

 

基本的には、白と黒。

背景が白に黒の文字は映えます。

 

しかし、それではどのブログも同じ色になってしまいます

ちょっと色を変えるだけでも、かなり印象が変わります。

 

色の効果

色で心理的影響を与える事もできます。

 

・赤は交感神経に刺激を与えます。情熱の赤ですねｗ

 

・青は沈静作用があり、神経的に落ち着かせる作用があります。

 

・黄色は脳が活性化され、頭の回転が早くなり集中力ＵＰの効果があります。

 

・緑は筋肉の緊張をほぐし、リラックスの効果があります。

このような色にも国際規格があったんですね！

 

 

「コントラスト比」を定義しているWCAG 2.0

 

国際規格のISO/IEC 40500:2012としても承認され。

文字色と背景色のコントラストが、色弱やその他の視覚障害のあるユーザーが

文字を読み取るのに十分かどうかを判定する基準となっています。

 

視覚障害がある・無いに関わらず、背景色と文字色で見やすい

見にくいは出てきます。

カラーコードでも、16777216色という膨大な数があります。

 

それを目視で検証するには時間がいくらあっても足りません＾＾；

そこで、コントラスト比をチェックしてくれる便利なソフトがありました。

 

 

カラー・コントラスト・アナライザー 2013J

「カラー・コントラスト・アナライザー 2013J」は、色のチェックをできるツールです。

前景色と背景色を入力することによりコントラストをチェックしたり

色覚の違いによる見え方を判定することができます。

配色

スポンサーリンク

⇒「カラー・コントラスト・アナライザー 2013J」をダウンロード

前景色（文字）が黒。背景色が白の場合です

これは、文句なしでＡＡＡ適合判定ですねｗ

 

インストール方法

上記のリンクからダウロードして頂いたファイルを解凍します。

配色2

赤枠で囲んだColour_Contrast_Analyser.exeをダブルクリックでソフトが起動します。

プログラムにインストールされませんので、ショートカットを作成するか

右クリックでスタートアップに登録、タスクバーに表示を選択すると使いやすいです。

 

カラー・コントラスト・アナライザーの使い方

配色3

前景色と背景色に調べたい色を入力します。16進の色コードまたは

赤枠で囲んだ、スポイトボタンをクリックすると拡大鏡画面が出てきて

色をクリックするだけで、自動的にカラーコードが入力されます。

 

背景色と文字色を選択すると、コントラスト比での適合判定が表示されます。

 

まとめ

 

配色4

背景色を白と前景色を水色で試しましたが

見事に不適合でした＾＾；

 

ちなみに、パステルカラーも明るくていいのですが

背景色に使うと目が痛いです。文字のアクセントには使えます。

 

どうしても、パステルカラーがいいという場合には

少しコントラストが低めの暗い色が良いみたいですｗ

 

こちらのソフトで、見やすい配色をお試しください。

 

 

最後までお読み頂き、ありがとうございました。

 

 

<

スポンサーリンク
>

<

スポンサーリンク
>

このエントリーをはてなブックマークに追加