Webアクセシビリティ：文字と背景のコントラストを確保する

2019年12月8日2021年6月6日

　文字の色とその背景色のコントラスト（色の差、明度差）を十分にとることで、文字の読みやすさが良くなります。逆にコントラストが弱いと読みにくい画面になります。高齢の人の為だけではなく、色々なデバイス（スマフォやタブレット）が普及したことで様々な場所（暗いところや明るい屋外）で閲覧されることも考慮して十分なコントラストを確保することはアクセシビリティの面でとても大切です。

文字の色とその背景色

一般的に文字色として白や黒が使われることが多いですが、これは他の色とのコントラストが大きい（高い）特徴があるからです。でも以下のように背景色によってはコントラストが低く見えづらい結果になる場合もあります。

コントラストを測定する

コントラストを測るとき目視で見えやすさや見えにくさを判断することもできますが、数値で測ると判断が容易です。簡単にコントラストを測定する方法があります。

■色のコントラストチェッカー

「Web Content Accessibility Guidelines (WCAG) 2.0」に基づいた、最適な文字色と背景色の組み合わせを見つけるためのウェブサービスです。

<使い方>
色のコントラストチェッカーのサイトを表示させます。

背景色と文字色を設定します、自動的に結果が表示されます。

コントラスト比が足りていない例

・色の設定の仕方
①まず上部の枠で色の■（四角）を選択します、すると下部に色指定のための画面が表示されます
選択方法は２通り
②直接色コードを入力する→→→HTML色コード一覧
②パレットから選択（左の帯で色相を選び右の領域で色を指定する）

・結果判定
色のコントラスト比と判定を確認します、満たすべき基準は以下です。

コントラスト比が満たされいる例

写真に文字を載せる場合の注意

写真に文字を載せる場合、写真の画面は均一な色ではないため、コントラストが確保された部分と足らない部分とができてしまいます。文字の色を途中で変えるのは大変ですし見苦しいです、そこで以下のような方法がよく使われます。

背景に帯をつける

文字を載せる背景に帯をつける
＊帯は黒や白が一般的です
＊このように少し透明にすると下の写真の様子も見えて圧迫感がありません

文字に縁をつける

文字の周りに縁をつける
＊この例ではぼかした影をつけています（ドロップシャドウ）
＊この画像の題字「Webバリアフイー」のように縁取り文字にするのもお勧めです

りんごからのお知らせ

こんにちは、Ringoです。岡山県真庭市というところで非常勤のデザイン講師をしながら、ブログやメルマガを利用したネットビジネスをご紹介しています。

このブログでは、老後の「ゆとり」を生む資金作りのノウハウを配信しています。
今だけ無料で『資金づくりの種類や手法をわかりやすくまとめたレポート』をお渡し、無料で受け取りたい！ということであれば、今すぐ「りんごのメルマガ」にご登録ください。
登録後、特典の受け取り方法をご案内するメールをお送りいたします。
＊特典を受け取った後にメルマガを解除いただいても構いません。
＊解除に対しての手数料もかかりません。

ただ、メールを読み続けていただくと、シニアライフに嬉しい「お小遣い」を獲得できるノウハウを紹介。無理なくコツコツと老後の資金を増やしていくためのお得な情報をお届けします。

SNSやネット活用の実践講座を交えた実りいっぱいの無料メルマガです。

お申し込みはこちらのボタンをクリック、是非この機会に(^o^)ﾉﾞ
↓↓↓↓↓↓↓↓↓↓ ＊クリックだけで登録はされません、表示された案内ページ内の申込フォームからご登録ください。

よろしければ、この記事やブログに関する　感想・聞いてみたいこと・要望などなどお聞かせください。内容と関係ない雑談も大歓迎です（^^）
↓↓↓↓↓↓↓お気軽にo(^-^)o♪
yoko_takano@appli.redまたは お問合せ

お願い記事内の不具合や間違い等をお知らせください。 （キャプチャーの違い、古くなった情報、誤字脱字等些細なことでもかまいません）
↓↓↓↓↓↓↓↓
＊お知らせいただいた方にはりんごからささやかなお礼を送らせていただきます。