3ホームページの具体的仕様-10色彩と配色（PDF形式 315

優先度
1
●●●新潟県ホームページ作成基準マニュアル 平成27年1月改定
Ⅲ
ホームページの具体的仕様
10
色彩と配色
(１) 情報は色の違いのみで伝えず、色の違いが分からなくても文字や音
声読み上げソフト等でも伝えられるようにする。
【JIS 7.1.1.1/JIS 7.1.4.1】
A
【解説】
色の違いだけでページの内容や操作するために必要な情報を提供すると、色覚に差異
のある利用者、視力が低下している利用者、音声読み上げソフト利用者、グレースケー
ル（白から黒までの明暗）で表示させている利用者等に、その情報が伝わりにくかった
り、伝わらない場合があります。ページを白黒印刷した時も、色の違いがわかりにくい
場合があります。
情報を提供する時に色の違いを利用することで、わかりやすく見やすくなる面もある
ので、色による情報と文字（テキスト）を併用しましょう。
【対応方法・実装例】
●グラフは色だけの凡例などで説明するのではなく、引き出し線をつける等しましょう。
≫良い例：引き出し線
悪い例：色のみの凡例
居住地別のイベント参加者割合
居住地別のイベント参加者割合
その他
C町
B市
10%
10%
10%
10%
20%
60%
20%
A市
60%
A市
B市
C町
その他
●入力フォームで必須入力項目を示す場合は、文字色を変えるだけでなく「必須」等の
文字を加えるようにしましょう。
≫良い例：色と文字で表示
悪い例：色のみで表示
赤字の項目は必ず入力してください。
赤字の項目は必ず入力してください。
名前（必須入力）
名前
ふりがな
ふりがな
●ボタンの色だけを変えるのではなく、形を変えたり、「戻る」・「進む」など機能に
関する文字もボタンに付け加えるようにしましょう。
○参考・関連項目 ： 作成基準Ⅰ ２公平で安全な情報提供(１)
作成基準Ⅱ １情報の提供(２)
116
優先度
1
●●●新潟県ホームページ作成基準マニュアル 平成27年1月改定
Ⅲ
ホームページの具体的仕様
10
色彩と配色
(２) 文字や画像にした文字はくっきりと読みやすくなるように、文字の
色と背景や文字の縁取りの色は明暗の差が十分ある組み合わせと
し、色の区別が困難な利用者に配慮して赤緑系等の色の組み合わせ
は使用しない。ただし、ロゴや装飾目的の文字、写真の背景等に写
っている文字、操作等を受け付けていない状態のボタン等は除く。
【JIS 7.1.4.3】
AA
【JIS 7.1.4.6】
AAA
【解説】
文字の色と背景の色に十分な明暗の差（コントラスト）がないと、文字が読みにくく
なります。パソコン等の画面（ディスプレイ）やプリンタの種類によっても色が微妙に
異なるため、明暗の差が十分ないと読みにくくなることがあります。写真に文字を配置
する場合等は背景によって部分的に明暗の差が小さくなることもあります。
また、色覚特性を持つ利用者によっては「赤と緑」や「黄と青」の組み合わせ、加齢
に伴い色の見え方が変わってきている利用者によっては「白と黄」や「青と黒」や「青
紫と黒」の組み合わせの場合、読みにくくなることがあります。
文字の色と背景の色を明暗の差が十分ある組み合わせにするか、明暗の差が十分ある
色で文字を縁取る等しましょう。
【対応方法・実装例】
●文字の色と背景の色は明暗の差が十分ある組み合わせにしましょう。
≫良い例：黒と白
悪い例：黄色と白
黒い文字と白い背景
黄色い文字と白い背景
●必要やむを得ず文字の色と背景の色は明暗の差が不十分な場合は、明暗の差が十分に
ある色で文字を縁取る等工夫しましょう。
≫良い例：縁取りした文字
悪い例：縁取りのない文字
読みにくい文字
※
日本語で 22 ポイント以上（太字の場合は 18 ポイント以上）、半角英数字で 18 ポイント以上（太
字で 14 ポイント以上）の文字は３：１以上、それ以外は 4.5：１以上の明暗の差（コントラスト比）
が必要。
※ 明暗の差（コントラスト比）を確認する無料ツールの例
カラー・コントラスト・アナライザー 日本語版（http://www.infoaxia.com/tools/cca/）
○参考・関連項目 ： 作成基準Ⅲ 10色彩と配色(３)(４)
117
優先度
3
●●●新潟県ホームページ作成基準マニュアル 平成27年1月改定
Ⅲ
ホームページの具体的仕様
10
色彩と配色
(３) 文章部分は、利用者が文字色と背景色を選べるようにする。
【JIS 7.1.4.8】
AAA
【解説】
利用者によっては、文字色と背景色を自分の読みやすい色に変えて閲覧しています。
ブラウザ（インターネット・エクスプローラ等のホームページを閲覧するためのソフ
トウェア）で色を変更している利用者もいます。例えば、インターネット・エクスプロ
ーラでは、上部のメニューバーの「ツール」→「インターネットオプション」→「ユー
ザー補助」の中の「Web ページで指定された色を使用しない」にチェックを入れます。
「インターネットオプション」に戻って「色」の「Windows の色を使用する」のチェッ
クをはずし、「文字列」や「背景」の色を選択します。
また、可能であれば、文字色と背景色を変更できるリンクやボタン等を用意しましょ
う。
○参考・関連項目 ： 作成基準Ⅲ 10色彩と配色(２)(４)
118
優先度
3
●●●新潟県ホームページ作成基準マニュアル 平成27年1月改定
Ⅲ
ホームページの具体的仕様
10
色彩と配色
(４) 色の指定はカラーネームではなく、数値（カラーコード）で指定す
る。
【解説】
色を指定する場合にカラーネームで指定すると、古いブラウザ（インターネット・エ
クスプローラ等のホームページを閲覧するためのソフトウェア）や携帯電話によっては
色が変わったり、表示されない可能性があります。できるだけ、数値（カラーコード）
で指定しましょう。
※W3C(ウェブで利用される技術の標準化をすすめる国際的な非営利団体)で定義されている、古いブ
ラウザや携帯電話でも同じ色で表示できるカラーネームは基本的な 16 色のみ。
※コンピュータでは、赤(Red)、緑(Green)、青(Blue)の光の３原色の組み合わせで色を表現する。
「#」
で始まる 16 桁の数値（カラーコード）の場合、最初の２桁が赤、次の２桁が緑、最後の２桁が青
を示し、それぞれ 00～FF までの 16 進数で記述する。FF に近いほどその色が強調される。
例 #0000FF 赤と緑は 00 で青が FF→青
#000000 赤と緑と青が全て 00→黒
#FFFFFF 赤と緑と青が全て FF→白
○参考・関連項目 ： 作成基準Ⅲ 10色彩と配色(２)
119