※質問するときは、「フォーラムの利用に関するご案内」、とりわけ「質問するときは」に目を通し、OS の種類や Firefox のバージョンといった使用環境についての最低限の情報を書き添えることをお勧めします。遅ればせですが、横から失礼します。
ご利用の環境条件が明示されていないので、ごく一般的な話として書きます。
(前置き)
ディスプレイ(モニタ)に表示される状態に関して、明るい/暗い、文字が大きい/小さいなどの感じ方は、個人差が大きい評価になります。視覚的なハンディキャップの有無や加齢による視力の衰え、置かれた環境条件なども影響するので、同じ人でもディスプレイの見やすさ、疲れにくさの状況は固定されておらず、常に変化すると考えるのが妥当でしょう。
そのため、PC にはディスプレイの輝度や配色、文字サイズなど、複数の調整機能が用意されています。パーソナル・コンピューター(PC)の、パーソナル(個人的、私的)の由縁です。
紙媒体では、文字の可読性と目に負担が少ない配色は、「薄い背景色」+「濃い文字色」と言われています。ポスターやチラシなど短時間でさっと眺める媒体はともかく、小説などの読み物が黒い紙に白い文字で作られることはなく、反射率を抑えた(白色度を抑えてクリーム色がかった)書籍専用紙に黒の文字で印刷されているのは、そういう理由からです。
ディスプレイは発光体なので、ディスプレイを見るということは光源を見ることとほぼ同義であり、この点が反射光で見る紙媒体とは違いますが、紙媒体になぞらえて、背景色と文字色の配色バランスを考える際の参考にはなるでしょう。
mNeji さんが書きました:
ところが、「情報の無いバックグランドの色を低輝度、簡単に言えば黒近傍色にかえた光量」と「文字色を黒から灰色に変えた光量」とすると、バックグラウンドの光量がとても低下するので、結果として目はリラックスします。
この配色は、全体を暗色に寄せる形でコントラストを低く設定している状態ですね。
光源としてのディスプレイから発せられる光量を抑えられるのは確かですから、"眩しさ" を苦にしているユーザーには十分効果的な配色だろうと思います。。
しかし、これが万人に見やすい配色だとは限りません。個人差や症状差はありますが、例えば白内障の初期状態では、光量やコントラストの低い対象はかなり識別し難いので、この配色は最悪の部類に入るでしょう。ディスプレイに表示された内容が読み取れないのでは、"眩しさ" 以前の問題です。
PC の配色やテーマで「高コントラスト」が用意されているのは、コントラストの高い配色のほうが見やすいというユーザー層(例:白内障など)が存在することが前提になっています。
このように、十人十色といいますか、ユーザーごとに視覚的な条件は様ざまです。したがってどう調整すればいいかも一律ではありませんし、何が正解ということを固定的に決めつけることはできません。
(本題)ある種の画像が塗りつぶされる件
nonnno さんが書きました:
書き漏らしましたが、windows「自分設定ハイコントラスト・haisai灰」を使い、Webが「つかう」選択では「テキスト と 背景色」でマスクされます。
「しない」ですとマスクされません。
「高コントラスト」では出る配色で変わります。
「win7高機能配色」でもマスクされます。
マスクされないと画像が表示されます。この条件の「htm」がよく判らないないので判断できかねています。
システム(OS)側の設定で高コントラストのテーマ・配色が選択されていて、Firefox の [配色設定] の [システムの配色を使用する] にチェックがついていて(有効化)、[選択した配色を Web ページが指定した配色で上書きする] の選択が [高コントラストなテーマのみ] になっている設定内容の組み合わせなら、その配色が Web ページに対して強制的に適用されます(もう少し細かい動作条件の切り分けがありますが、詳細は省略...)。
その結果、アクセスした Web ページにある画像が、背景色で塗りつぶされる(マスクされる)ことは十分起こりえます。
「高コントラストなテーマ」は本来、中間調の色を排除して明暗の区別がよりはっきりする、ごく少数(突き詰めれば白黒二値)の色の組み合わせにすることを目的としたものですから、その条件に適うよう Web ページの配色を上書きします。極論すれば、そのページの要素がフォアグラウンド(前景)かバックグラウンド(背景)かの二択で判断され、どちらかになるように強制的な上書きがおこなわれる結果、バックグラウンドの要素は画像であっても高コントラストテーマの背景色で塗りつぶされる場面があるわけです。
煩雑な画像が背景に指定されていて文字が読みにくいぺージでも、その背景画像を単色で上書きすることで明暗のはっきりした配色にする、といえばわかりやすいでしょうか。
しかし、すべての画像が背景色で塗りつぶされるわけではありません。
その Web ページのベースとなる HTML に img src で定義された画像は塗りつぶされません。これらはフォアグラウンドの要素だからです。明らかにフォアグラウンドの要素は、テキストやボーダー(線)はもちろん、画像なら画像そのものが表示されます。
しかし、HTML や CSS でバックグラウンドの条件で定義されている画像 ―― 例えば background-image: url("画像のURL"); のようなもの ―― は塗りつぶされます。バックグラウンドで定義されたものは、たとえ画像であっても背景色で上書きするのが高コントラストの働きだからです。
誰でも試せる一例を上げます。
http://www.yahoo.co.jp/を開いて、Firefox の [配色設定] をいろいろ変更してみてください。
表示されたままの画像と、背景色で塗りつぶされる画像があるのがわかると思います。
結局、その Web ページにある個々の画像がどのように定義されているかで、結果が変わってきます。
ページ内の画像が、コンテンツとしてそれ自身をしっかり見せるべきものなのか、装飾的なもの(明らかな背景画像や、テキストで代替できるような単なるアイコンなど)なのか、製作者側でその性格を切り分けて定義することが理想です。
しかし現実は、様ざまな事情からおざなりになっていたり、適切に指定できていないケースがしばしばあります。
(補足)
ご承知のように、配色を含む Web ページのデザインは、それを発信しているサイト運営者側がコントロールしています。だいたいはサイトごとに基本的な設計がありますが、同じサイトでもページによってデザイン・配色が大きく異なるケースもあります。
通常、ブラウザはサイト側の指定を忠実に再現するように動作します。しかし、ユーザーの視覚的な制約や好みは多様なので、お仕着せのサイト・デザインでは不都合を感じるユーザーが出てきます。
アクセシビリティを尊重しているサイトなら、複数のユーザースタイルを用意しているところもあり、ユーザーが見やすいと感じるデザイン・配色に簡単に切り替えられたりします。けれども、そういう配慮をしているサイトは、国や自治体の公共サービスでさえ非常に少ないのが現状です。(サイト側で万人向けの対応を確実におこなうのは、それはそれで難しいことですし...。)
そうなると個々のユーザが、自分にとってベストな対策をするしかありませんが、すべてのブラウザがユーザーの操作で簡単に配色設定できる機能を持っているわけではありません。
Firefox は [配色設定] が可能ですが、この機能も限定的であり、サイトごと・ページごとに変化する背景とテキストの配色バランスを、ユーザーの好みに合わせて一律に固定します。
視覚的な制約のあるユーザーにとっては有用な機能に違いありませんが、使い方によっては、また閲覧する Web ページの作りによっては、逆に可読性を損なってしまうことがあります。
Web ページの特性に合わせて自動的に調整できればいいのでしょうが、「明るい/暗い」の感じ方は個人差が大きく、環境照明の状態にも大きく左右されますし(*)、なによりアクセスした Web ページのデザイン・配色をどう感じるかの基準はユーザーの主観に依存しますから、それらを包括して客観的に自動調整してくれるような機能は、現状ではどんなブラウザにもありません。
(*) 炎天下の野外で ノート PC のディスプレイを見るような場合と、照明を切った暗室でディスプレイのバックライトのみを頼りにする場合では、感じ方がまったく違ってきます。結局、閲覧している Web ページごと、場面ごとにユーザーが個別に調整するか、それを面倒だと感じるなら決まった配色で固定して多少の不都合は妥協するか、どちらかになると思います。
ある種のアドオンは、Web ページ側でもともと指定された配色と Firefox の [配色設定] で設定された配色を簡単に切り替えるボタンを提供してくれますし、プリセットされたいくつかの配色をボタン操作で Web ページに適用してくれるものなどがあります。(mNeji さんが書かれている NoSquint もこうしたアドオンのひとつです。)
そういったアドオンを試して、自分にとって使いやすいと感じたものを導入すれば、緩和策のひとつにはなるかもしれません。
(参考)
https://addons.mozilla.org/ja/firefox/s ... page+colorさらに、手間を厭わないのなら、自前でユーザースタイル(userContent.css)を用意して、よく利用するサイトごとに特化した好みの配色を設定することは(一定の範囲で)可能です。
即席で作ったサンプルですが、例えば次のような感じです。
--------------------------------------------------------------------
/* google.co.jp の検索ページの背景全般の明るさを抑制する */
@-moz-document domain(google.co.jp) {
/* 指定対象全般の背景色、輝度、コントラスト */
#viewport, #rcnt {
background-color: #eeeeee;
filter: brightness(95%);
filter: contrast(95%);}
/* 検索文字の入力欄の背景色、輝度、コントラスト */
#sfdiv > .sbib_a, #lst-ib {
background-color: #ffffcc !important;
filter: brightness(105%) !important;
filter: contrast(105%) !important;}
}
--------------------------------------------------------------------
brightness や contrast は数値指定です。(0.9) とか (1.2) といった指定もできますが、概念を理解しやすいと思たので、ここではパーセント指定で例示してます。100% が基準値で、それより大きく(120% とかに)なれば高輝度・高コントラストになり、小さく(90% とかに)なれば低輝度・低コントラストになります。
ただし、あくまで CSS のフィルタ機能としてブラウザ上の表示における論理的な brightness や contrast であり、ディスプレイ自体の物理的な動作とは無縁です。
上記のスタイルを機械的に導入しただけでは、既存条件の制約やユーザーがすでに施している設定などの影響で期待通りには動作しない可能性があります。スタイルを適用させたい対象をはじめ実際に得たい結果は、上記のスタイルをアレンジするなり、別のものを書くなり、ユーザーが個別に調整してください。
html や body をセレクタとすればページ全体への指定ができ、未知のサイトに対してもユーザースタイルで配色指定をできなくはありませんが、これは [配色設定] の強制上書きと同じことになります。各 Web ページの実情を度外視した杓子定規なユーザースタイルの強制適用をやると、ページの表示やサービスの動作上、問題が起こるケースが出てきます。ご注意ください。
とりあえず以上です。的外れな話になっていたらすみません。