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

2019年12月8日

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

5.文字と背景のコントラストを確保する
(アクセシビリティを確保するための基本項目)

背景色と前景色のコントラストは、明度差で125以上、色差で500以上必要である。


1.4.3
 コントラスト(最低限レベル)の達成基準 テキスト及び文字画像の視覚的提示には,少なくとも 4.5:1 のコントラスト比がある。(JIS X 8341-3:2016の項目)

文字の色とその背景色

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

画像、文字色と背景色のコントラストの違い

コントラストを測定する

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

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

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

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

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

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

キャプチャー、チェッカーの使い方例1、コントラスト低

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

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

*情報を伝えている文字の色と背景色とのコントラスト比
4.5:1以上が確保されていることが必要

1.4.3 コントラスト (最低限) (レベル AA)
テキスト及び文字画像の視覚的提示に、少なくとも 4.5:1 のコントラスト比がある。ただし、次の場合は除く:

  • 大きな文字: サイズの大きなテキスト及びサイズの大きな文字画像に、少なくとも 3:1 のコントラスト比がある。
  • 付随的: テキスト又は文字画像において、次の場合はコントラストの要件はない。アクティブではないユーザインタフェース コンポーネントの一部である、純粋な装飾である、誰も視覚的に確認できない、又は重要な他の視覚的なコンテンツを含む写真の一部分である。
  • ロゴタイプ: ロゴ又はブランド名の一部である文字には、最低限のコントラストの要件はない。
 

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

キャプチャー、コントラスト比OKの例

 

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

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

背景に帯をつける

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

文字に縁をつける

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

最後にもう一度、Web(サイト)でのアクセシビリティとはなんなのか?

一般的な認識は「視覚障害者向けの音声読み上げソフトに対応したサイト作成」といったイメージが強いかと思いますが、どちらかと言うとバリアフリーやユニバーサルデザインと同じような考イラスト、車椅子と階段え方で、「年齢や身体的条件を問わず、誰でもウェブで提供されている情報にアクセスして利用できることを指します。

もっと具体的に言うと
・小さい字が見えにくい
・薄い(コントラストの低い)字は見えにくい
・ボタンや、導線のわかりづらいページは操作ができない
・マウスの操作は慣れていない
といったごく普通のシニアの方がかかえる障害があっても、見てわかりやすい&操作がしやすいページを用意することです。

*このブログではWeb作成上の具体的な内容をひとつづつご紹介しています。この機会に取り組みませんか!

イラスト、車椅子とスロープ

↓↓↓↓↓↓↓(メニューバー「Webバリアフリーの勧め」からアクセスできます)
情報のバリアフリー化のための記事一覧

りんごからのお知らせ

こんにちは、Ringoです。岡山県真庭市で非常勤のデザイン講師をしながら、ブログ&メルマガを利用したネットビジネスに奮闘中です。

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

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

イラスト、りんごを持ったおじさんとおばさん

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

お申し込みはこちらのボタンをクリック、是非この機会に(^o^)ノ゙
↓↓↓↓↓↓↓↓↓↓ バナー、りんごメルマガ登録用 *クリックだけで登録はされません、表示された案内ページ内の申込フォームからご登録ください。

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