MozillaZine.jp フォーラム
https://forums.mozillazine.jp/

配色の変更について
https://forums.mozillazine.jp/viewtopic.php?f=2&t=15661		 ページ 1 ／ 1
作成者:  nonnno [ 2015年9月17日(木) 13:15 ]
記事の件名:  配色の変更について
完全テーマ FT DeepDark FT DeepDark 13.0.2 を使っています。

目が悪いのではないのですが、
最近は　Webの配色が明るすぎるので　（日本での傾向か）長く見ておれないため、暗い配色にしたいです。

オプション　にて　「コンテンツ　配色設定」
「システムの配色を使用する　選択した配色をWebページが指定した配色で上書きする　高コントラストなテーマ」
を選んでいます。
「常に」　を選ぶと　コンテンツ中の画像が「ベタの地色」になって見えません。

Webの地色が明るすぎるのを「暗い色」にスワッピングするか、
システムの配色を選んだ時、画像がベタの地色に紛れないように表示する方法はありませんでしょうか？

また、現在の設定状態を伝えるために、データーなどの表記方法はありませんか？
作成者:  pal [ 2015年9月17日(木) 21:28 ]
記事の件名:  Re: 配色の変更について
通常は、画像には配色設定は影響しないはずです。
ご利用になっているテーマと干渉しているかもしれません。

テーマをデフォルトのものに戻し、オプションの「コンテンツ　配色設定」だけを設定してご確認を。

なお、「システムの配色を使用する(下記ページではUse system colors)」をチェック(選択)する必要はありません。


https://support.mozilla.org/ja/kb/chang ... lcatcolors
添付画像は古いバージョンのものですが、設定項目は同じです。
作成者:  nonnno [ 2015年9月17日(木) 22:48 ]
記事の件名:  Re: 配色の変更について
有り難うございます。
書き漏らしましたが、windows「自分設定ハイコントラスト・haisai灰」を使い、Webが「つかう」選択では「テキスト　と　背景色」でマスクされます。
「しない」ですとマスクされません。
「高コントラスト」では出る配色で変わります。
「win7高機能配色」でもマスクされます。

マスクされないと画像が表示されます。この条件の「ｈｔｍ」がよく判らないないので判断できかねています。

（おそらく見えても対処でき無いとも思っています）
このような暗い配色は出来ないのでしょうか？

添付ファイル:
WS000111.JPG
WS000111.JPG [ 7.93 KiB | 表示数: 6501 回 ]
WS000110.JPG
WS000110.JPG [ 4.2 KiB | 表示数: 6501 回 ]
WS000109.JPG
WS000109.JPG [ 15.88 KiB | 表示数: 6501 回 ]
作成者:  mNeji [ 2015年9月28日(月) 14:21 ]
記事の件名:  Re: 配色の変更について
nonnnoさん、

私も最近、明るいバックグランド色だと目が眩しすぎて疲れるので、色々なアプリケーションで「暗いバックグラウンド色」の設定に苦労しています。

で、Firefoxでは「NoSquint」というアド・オンを利用して、凌いでいます。ちなみに、このトピックの先頭部部は下図のように見えています；
図



目的が違っていれば、ゴメンなさい。
作成者:  pal [ 2015年9月28日(月) 20:53 ]
記事の件名:  Re: 配色の変更について
配色(コントラスト)を変えるのもひとつの手ではありますが、明るすぎるのがイヤなら、モニターの輝度を下げるのも効果があると思います。
下記、point5
http://www.itmedia.co.jp/pcuser/article ... 004_2.html
作成者:  mNeji [ 2015年9月28日(月) 21:28 ]
記事の件名:  Re: 配色の変更について
palさん、

コメントありがとうございます。

確かに、もう少し若い時には「低輝度」で対応してきましたが、年を重ねるごとに、それでは対応し切れなくなりました。

簡単に言えば「情報の無いバックグランドからの光量」と「文字からの光量」は全体の輝度を変えてもあまり変わらないわけです。

ところが、「情報の無いバックグランドの色を低輝度、簡単に言えば黒近傍色にかえた光量」と「文字色を黒から灰色に変えた光量」とすると、バックグラウンドの光量がとても低下するので、結果として目はリラックスします。

初めのうちは、暗い中で作業をするので奇妙な感覚を持ちましたが、慣れてくると目がとても楽になります。最近は不思議と老眼が少し回復してきて、小さいものを見る時にも、距離を遠くにしなくても見られるようになりました（別の理由かもしれませんが）。

現在、「NoSquintでFirefoxを見る時の問題点」を観察しているところです。纏まったら、こちらのフォーラムに報告したいと思っています。
作成者:  偶然的通行人 [ 2015年9月29日(火) 08:34 ]
記事の件名:  Re: 配色の変更について
※質問するときは、「フォーラムの利用に関するご案内」、とりわけ「質問するときは」に目を通し、OS の種類や Firefox のバージョンといった使用環境についての最低限の情報を書き添えることをお勧めします。

遅ればせですが、横から失礼します。
ご利用の環境条件が明示されていないので、ごく一般的な話として書きます。

（前置き）
ディスプレイ（モニタ）に表示される状態に関して、明るい／暗い、文字が大きい／小さいなどの感じ方は、個人差が大きい評価になります。視覚的なハンディキャップの有無や加齢による視力の衰え、置かれた環境条件なども影響するので、同じ人でもディスプレイの見やすさ、疲れにくさの状況は固定されておらず、常に変化すると考えるのが妥当でしょう。
そのため、PC にはディスプレイの輝度や配色、文字サイズなど、複数の調整機能が用意されています。パーソナル・コンピューター（PC）の、パーソナル（個人的、私的）の由縁です。

紙媒体では、文字の可読性と目に負担が少ない配色は、「薄い背景色」＋「濃い文字色」と言われています。ポスターやチラシなど短時間でさっと眺める媒体はともかく、小説などの読み物が黒い紙に白い文字で作られることはなく、反射率を抑えた（白色度を抑えてクリーム色がかった）書籍専用紙に黒の文字で印刷されているのは、そういう理由からです。
ディスプレイは発光体なので、ディスプレイを見るということは光源を見ることとほぼ同義であり、この点が反射光で見る紙媒体とは違いますが、紙媒体になぞらえて、背景色と文字色の配色バランスを考える際の参考にはなるでしょう。

mNeji さんが書きました:
ところが、「情報の無いバックグランドの色を低輝度、簡単に言えば黒近傍色にかえた光量」と「文字色を黒から灰色に変えた光量」とすると、バックグラウンドの光量がとても低下するので、結果として目はリラックスします。

この配色は、全体を暗色に寄せる形でコントラストを低く設定している状態ですね。
光源としてのディスプレイから発せられる光量を抑えられるのは確かですから、"眩しさ" を苦にしているユーザーには十分効果的な配色だろうと思います。。

しかし、これが万人に見やすい配色だとは限りません。個人差や症状差はありますが、例えば白内障の初期状態では、光量やコントラストの低い対象はかなり識別し難いので、この配色は最悪の部類に入るでしょう。ディスプレイに表示された内容が読み取れないのでは、"眩しさ" 以前の問題です。
PC の配色やテーマで「高コントラスト」が用意されているのは、コントラストの高い配色のほうが見やすいというユーザー層（例：白内障など）が存在することが前提になっています。
このように、十人十色といいますか、ユーザーごとに視覚的な条件は様ざまです。したがってどう調整すればいいかも一律ではありませんし、何が正解ということを固定的に決めつけることはできません。

（本題）ある種の画像が塗りつぶされる件
nonnno さんが書きました:
書き漏らしましたが、windows「自分設定ハイコントラスト・haisai灰」を使い、Webが「つかう」選択では「テキスト　と　背景色」でマスクされます。
「しない」ですとマスクされません。
「高コントラスト」では出る配色で変わります。
「win7高機能配色」でもマスクされます。

マスクされないと画像が表示されます。この条件の「ｈｔｍ」がよく判らないないので判断できかねています。

システム（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 ページの実情を度外視した杓子定規なユーザースタイルの強制適用をやると、ページの表示やサービスの動作上、問題が起こるケースが出てきます。ご注意ください。

とりあえず以上です。的外れな話になっていたらすみません。
作成者:  mNeji [ 2015年9月29日(火) 09:58 ]
記事の件名:  Re: 配色の変更について
偶然的通行人さん、

興味深い解説ありがとうございます。

ご紹介いただいたGoogle検索の.cssによる設定例はStylish(Firefox)で弄ってみてから、別途トピックを立てて、ご質問します。

その時に、今回お書きいただいた考え方についても論議させていただきたいです。

ご連絡まで。
ページ 1 ／ 1 All times are UTC + 9 hours
Powered by phpBB® Forum Software © phpBB Group
http://www.phpbb.com/