colorにredとgreenはだめなのよねぇ…

Lighthouseで色の指摘が行われるようになった

いつ頃からか忘れましたが、文字の色が検証対象となっています。コントラスト云々とか出てきます。簡単に言えば「この背景でこの文字色では見づらいじゃないか」という意味。

Lighthouseはwebページの指標としてはとても役に立つツールではありますが、完璧ではない (∵`)
例えば「色を変える理由」は以下のような理由でしょうか。

1. 目立たせる
2. 気分
3. 文章内容の比較対象

②については「なんやそれ (∵`)」と(笑)
注目は③の 比較 です。

例えば上記の文章は真逆のことを述べています。これを以下のようにすると

それぞれの文章の内容・意味の比較としてはより明確になりますよね。Lighthouseはこういった使い方をあまり考慮してくれません。

例えば上のスクリーンショットで、「りんご」という単語を判別しやすいのは上下どちらでしょうか。いずれの行も「りんご」は緑系の文字色が指定してあります。多くの方は「下の行の方が見やすい・わかりやすい」と答えるのではないでしょうか。左右にある文字色とのコントラストが強いので目立って判別しやすくなるためです。つまり「みかん」「りんご」の単語の別というよりも、この一連の文字列の「色」で比較対象が自発的に行われているわけですね。

ですが上の行はLighthouseで減点されず、下の行は減点対象です。なぜならLighthouseでは「背景色」に対する「文字色」しか考慮しないからです。

といった具合で、時にはLighthouseが絶対正しいわけではない、ということも念頭に置いた方が良いですね。スコアに囚われすぎないことも大事。

これから以降の章はこういった臨機応変な使い方を除外して説明します。場合によってはスクショの下の行のようにした方が良いこともありますので、全てが当てはまるわけではないよ、という事前説明の意味合いを持つのが本章の役割です。

カラーネーム red green

『赤』『緑』は比較的良く利用される文字色だと思います。カラーネームとカラーコードはそれぞれ以下の通り。

	red #ff0000 rgb(255,0,0)
	green #008000 rgb(0,128,0)

色の判定にはガイドラインが存在します。WCAG (Web Content Accessibility Guidelines, ウェブコンテントアクセシビリティガイドラインズ) と呼ばれます。

WCAGは 視覚など様々なハンディキャップをお持ちの方ができるだけ快適にwebを利用できること を目指す 世界標準規格 です。なので文字色についてLighthouse等で減点されると「…チッ、うるせぇこと言いやがって」と感じるかもしれませんが、意義を理解すれば納得できるのではないでしょうか。お説教の意味を理解して正すのと、ただ作業として正すのでは大きな違いがあります。これがわかれば前章の「比較・判別」についても別の考え方が出てくるかもしれません。

ただハンディキャップの方向けに頑張りすぎて、それ以外の方に不便が生じては本末転倒なので、何事もバランスが大切といったところでしょうか。

というわけで、『赤』『緑』それぞれを検証した結果は以下の通りです。

【背景色 白(#ffffff) の場合】

【背景色 黒(#141414) の場合】

1.4.3 Contrast(Minimum)
達成基準1.4.3項

最低限コントラスト

1.4.6 Contrast(Enhanced)
達成基準1.4.6項

よりレベルの高いコントラスト

large text
大きい文字

およそ22px以上
(太字の場合はおよそ18px以上)

Non-text Contrast
非テキストコントラスト

アイコンやボタンなど

黒背景は 16進数(hex)で #14141410進数(dec, rgb)で rgb(20,20,20) として検証しています。

いわゆる『真っ黒』はカラーコード #000000 rgb(0,0,0) ですが、webでの利用はおすすめできません。

特に背景などに用いる場合、真っ黒というのが元来チラつきの発生しやすい色で、スマホのスクロールで黒背景がチカチカおかしな動きをしたり、真っ黒背景の前面に表示されるアイテムがチカチカするのを目にしたことがあるかもしれません。小難しく言うと「明度差が大きくなりやすく目が疲れやすい」色なのでwebデザイナー的には「使用を極力避けたい色」それが「真っ黒」です。

暗色・黒系背景で大抵の場合は深めだと #141414 rgb(20,20,20) あたりを利用します。明るめで #323232 rgb(50,50,50) ぐらいでしょうか。参考までにYouTubeのダークモード背景は #0f0f0f rgb(15,15,15) です。
* rgb値は数値が大きいほど明るくなりますので覚えておくと便利です。

話を戻しまして、検証結果から利用率の高いカラーネーム red green は基準を満たしていないことが見て取れます。

対策 クラス属性の利用

『見たまま編集』をご利用の方には残念なお知らせになってしまいますが、結論として最も合理的なのは クラス属性 (class attribute) を使うこと です。つまり『見たまま編集』だけでは補えません。『HTML編集』が有利です。

『見たまま編集』のツールを利用して、その都度色をクリック選択、という手順を踏む方も少なく有りませんが、その場合の大抵は 今使っているテンプレートだけ、今見ている画面だけ しか意識していません。例えば白系背景のテンプレートを利用しており、気分が変わって黒系背景のものに変更したとします。すると過去に色とりどりにしたテキストの可読性が著しく低下、ひどい場合は 読めない という結果を招きます。

以前から何度も書いているんだけれども、「絶対白背景以外使わない」あるいはその逆を公言したとしても意味がない。自らそんなナンセンスな縛りを課す必要は無いですし、ダークモードの存在を忘れてはいけません。ダークモードというのは管理者ではなく閲覧者の選択ですから、「絶対白！」と管理者が言ったところで閲覧側が暗色で読みたければ変更します。テンプレートがダークモード対応になっていなくとも、アドオンなどで変更する人も居ます。そういう方は「意図的に好んで」変更をするわけですから、管理者の意思とは無関係。

そういった技術的な問題が無くとも、ページ内でコロコロ色を変えてある文章を読みたいと思う方は思うほど多くありません。読みづらいし気が散るから です。テキスト色変更を頻繁に行っている方はこの機会に方針の再検討をおすすめします ^^;

『見たまま編集』のツールで色を指定した場合、バックグラウンドでは

<span style="color: カラーコード">テキスト</span>

こんな感じで style属性 で処理されます。style属性によるCSS指定(インラインCSS と言います) は優先度が高いため、修正しようと思えば 対象記事の編集画面を開き、該当部位を直接変更する という手段に限られます。めちゃくちゃ大変 （￣∀￣；）

一方、色指定を class属性 で管理した場合

<span class="クラス名">テキスト</span>

同じクラス名を持つものはスタイルシートを一度変更すれば 全てそれに従う わけですから、100記事も1000記事もいちいち開いて修正、などという羽目にはなりません。そして ダークモード対応も容易 になります。インラインCSSではダークモードに対応できません。

『赤』『緑』の推奨カラーコード指定

色々調整してみて、個人的に「これかな」と思うものをサンプルとして掲載しておきます。もちろんご自分で調整してみても良いと思います。その際の注意点は、基準を満たすためにいろいろ変更していると、「赤が赤じゃなくなる」「緑が緑じゃなくなる」ことがあります。

何故今回『赤』と『緑』に絞るかというと、信号機と同じで『赤』『緑』『黄』には 暗黙の意味 があり、多くの方が「赤は警告」「緑は安全」「黄は注意」という概念を潜在的に抱えているはずで、視覚的に「赤かピンクか、はたまたオレンジか…」というのではテキスト変更の意味も半減してしまいますので、極力色の見た目の本質を保った状態で調整を試みましょう。
つっても、『赤』の調整ってものすごく難しいのよねぇ (∵`)

『黄』を除外する理由については テキスト色としてダントツにおすすめできない色 だからです。黄文字とのコントラストが成立するのは背景が『黒系』の場合のみ、と考えてください。黃は赤以上に「意味を保った上での調整(黄色として認識できるかどうか)」が困難です。

推奨コードの条件は以下の通りです。

• カラーコードはrgb値とする (微調整が容易なため)
• 『白背景』は rgb(255,255,255) から rgb(240,240,240) までを想定
• 『黒背景』は rgb(20,20,20) から rgb(40,40,40) までを想定
• Minimum Contrast(最小限コントラスト) の準拠を目指す

赤 カラーコード

* クラス名を c_red としていますが、自分がわかりやすい文字列で構いません。但し既存クラス名とバッティングしないよう注意してください。red など単純すぎるとバッティングの可能性が高まります。

<span class="c_red">テキスト</span>

.c_red {
  color: rgb(164,11,11);
}
@media (prefers-color-scheme: dark) {
  .c_red {
    color: rgb(255,77,77);
  }
}

黒系背景の場合の赤は Enhanced Contrastの基準を満たせません。これ以上やると「赤ではない色」になってしまいます。現段階でも「オレンジ寄りの赤」または「赤寄りのオレンジ」という感じで、赤色の持つイメージの保持を考えるとギリギリ折り合いを付けられる限界ラインかな、と思います。

緑 カラーコード

* クラス名を c_green としていますが、自分がわかりやすい文字列で構いません。但し既存クラス名とバッティングしないよう注意してください。green など単純すぎるとバッティングの可能性が高まります。

<span class="c_green">テキスト</span>

.c_green {
  color: rgb(0,92,20);
}
@media (prefers-color-scheme: dark) {
  .c_green {
    color: rgb(152,219,57);
  }
}

まとめ

ブログ背景色は「青みがかった白」「茶色っぽい黒」など様々です。それぞれの状態でチェックを行う必要があります。本記事では「できるだけ広範囲をカバー」というのも目的にしているため、xxxからyyyまで といった背景色の条件を付けていますが、みなさんが利用するテンプレートでは背景色は予め決まっているはずですから、その背景色で検証すればOKです。その際にはダークモード対応の有無を忘れずに確認してください。

ダークモード非対応テンプレートでダークモード用の色変更を加えてしまわないよう注意です。これをやってしまうと、閲覧者がダークモードをONにした際にページの他の部位は何も変わらずテキスト色だけが変更されて全く読めなくなります。

あとは「もともと黒系背景で運営している」という場合、つまりライトを想定していない場合は何もする必要はありません。ありませんが、当然白背景のテンプレートに変更した際にはひどいことになります。そういった事態を避けるには やたらと文字色を変更しない を心がけると良いでしょう。

他の手段で『背景色を付けた上で文字色を付ける』というのもあります。これならブログの全体背景が変わってもその部位は維持されますので安全です。安全ですけれども、多くの方は「テンプレートによって自動で文字色が指定されていることを忘れる」傾向にあります。例えば以下のような感じ。白背景のテンプレートを利用中だと仮定します。

<span style="background: yellow;">テキスト</span>

背景色指定だけがあり文字色が指定されていません。

デフォルトの文字色指定が真逆になるので当然の結果です。対策として、記事作成あるいは編集中にテキスト背景色の前面にあるテキストが普通に読めたとしても、怠らずにきちんと文字色の指定を同時に行っておけば安心です。

<span style="background: yellow; color: rgb(51,51,51);">テキスト</span>

テキストの色に今後気を使おうとお考えの方は コメント欄の装飾ツールの削除をおすすめ します。管理者が気をつけたところで、訪問者がコメントを書く際に色を変更したらどうしようもありません。

FC2ブログのコメント装飾ツールは思い切って削除して良いと思う

FC2ブログではコメント入力時に使える装飾ツールが準備されていますが、方針次第で思い切って削除してしまえば良い、のススメ。簡単に言えば 第三者による入力内容の制限 です。...

vanillaice000.blog.fc2.com

にっちもさっちもいかなくなった場合の対処法はこちら ↓
* おすすめは致しません。

背景色と衝突してテキストが読めない！に対処する

「文字が読めない」このトラブルは多くの場合「白背景から黒背景にしたら(逆も然り)文字がところどころ読めなくなった」というケースが多いですね。つまり フォントカラー指定時に背景色が反転した場合を想定していなかった ということです。この解消法について。...

vanillaice000.blog.fc2.com

最後に、ブラウザ上で検証できるAdobe社のツールです ↓

Adobe Color

WCAG 2.1 レベル検証

color.adobe.com