WEB制作

【考察】Webのテキスト本文を#666とかにするのはアクセシビリティ的によくない

今回はWebデザイン七不思議の一つを考察してみる。

100%の黒である#000はテキスト本文において基本的に使われない。というか、タブー視されているということである。

紙の印刷物だったら本文は100%の黒インクが使われるのは家庭用プリンターでも商業印刷でも普通で、デザイン的に凝った印刷物くらいでしかグレーなどを含む黒以外の色は本文として使われることは少ないだろう。

よく使われるのは#333のグレー

企業のサイトでも個人のサイトでも、本文によく使われるのは言われないと気付かない程度に黒よりも少し明るい濃いグレー色の#333である。

なぜ#333なのかは諸説あるが、白い背景に真っ黒の文字は目が疲れるからとされている。都市伝説かよ、というツッコミはとりあえず置いておく。

東京タワーが333mだからというのは関係がないようだが、Goolgeやアマゾンは#333付近の似たような濃いグレーを使っている。

誰が流行らせたかわからないけど、全世界的にそういう暗黙のルールになっているようだ。

宇宙に漆黒の闇は存在するのかしないのか

地球の自然界には100%の黒は存在しないというのが根拠になっているのかもしれないし、そうでないかもしれない。

Web以外のもっとまともなデザインの世界でも真っ黒は使うな、と言われることがあるんだとか。

100%の黒は宇宙にしか存在しないことになっているから、ちんけなWebデザイナーというか人間ごときが漆黒の闇を使うのは紙に背くということなのか。

ブラウン管時代には焼け付きという現象があったが、それが関係するのかどうかは定かではない。

#333はともかく#666 は薄くて目に悪い

偉い人はともかく拙者みたいな底辺Webデザイナーから言わせてもらうと、#333はともかく#666 は薄くて目に悪いし、普通に読みにくい。

今どきのそこそこマトモなモニターならともかく、一昔前や二昔前の古いモニターを使うと美味ようなグレーは色が飛んでしまって読みにくいのだ。というより、読めないので離脱してしまう。

#333は拙者も世の中の流れに合わせて使うが、なぜ本当の黒ではダメなのか15年くらいWeb界隈の仕事をしていても明確に答えることができない。

アクセシビリティ的にはコントラストを稼いだ方が正義なんだし、それを考えたら#666や#333は間違いにより近いこともなる。

俺が言えるのは、#666派を全否定する気はないし人様の勝手だが、せいぜい#333くらいで世渡りするのがよいのではないかと思う。

WEB制作

CSSの強制継承「inherit」は他人が作ったグダグダなCSSをリセットしたい時に有効

cssの基本として親要素のプロパティ(色とか)を子要素が引き継ぐというものがある。

自分が書いたcssならまだしも、前任者から引き継いだcssをいじるとなると、その人の手癖や自分よりレベルの高い書き方(笑)などの要因によって、修正したり書き換えるのが困難な場合がある。

これはCSSに限らず、プログラミング言語などでも他人が書いたコードをいじるというのは難しいのだ。

ひたすらデベロッパーツールをいじくりまわしても、何がどうなっているか簡単に見つけ出すことができない。

やっと目的のクラスやプロパティらしきものを発見しても、複数のcssによってプロパティが上書き、上書きとグダグダになっている場合、簡単に修正できない場合がある。

むしろ初期状態に戻すのがinherit

そういうグダグダな作りのcssの場合、往々にしてあなたが想定している継承が無効化されていることがある。CMSで動的に強い力でcssが割り当てられているようなケースだ。

そんな時には強制的に継承させるプロパティ「inherit」が役に立つ。どちらかというと初期状態に戻す処理になる。

もしかしたら、人によってはあまり使ったことがないかもしれないが「inherit」は色やフォントなども含め、全てのプロパティに適用させることができる。

使い方の例
#sidebar h2 { color: inherit; }

詳しい使い方を知りたい場合はこちらのページが役に立つ。
https://developer.mozilla.org/ja/docs/Web/CSS/inherit