背景に画像のある場所で、コントラスト比の基準を満たす

文字の色と背景色の間には、一定以上のコントラスト（明るさの差）がなければ、文字の可読性が低くなります。特に老眼や弱視など、見えづらさを抱えている人は、文字の色のコントラスト比の低さの影響を受けやすくなります。

WCAGにはコントラストについていくつかの基準がありますが、最も意識される頻度が高いのは[1.4.3 コントラスト (最低限)](https://waic.jp/translations/WCAG22/#contrast-minimum)（レベルAA）に登場する4.5:1というコントラスト比の数字でしょう。文字が大きいときは、とか、レベルAAAでは、という話は一旦置いておきましょう。

WCAGの基準で使われるコントラスト比は、文字の色と背景色のカラーコードを[WebAIM Contrast Checker](https://webaim.org/resources/contrastchecker/)などに入力することで計算できます。



## 背景に画像がある場合のコントラスト比

背景に画像がある場合には、コントラスト比の計算が面倒くさくなります。文字の周囲で最も明るい、もしくは最も暗い色を特定して、その色が文字の色と十分なコントラスト比となっているか……ということを考えなければなりません。

![左側は昼間の砂浜の写真、右側は夕暮れの海面の写真で、昼間の写真には「明るい背景画像には暗い色で文字を書く」、夕暮れの写真には「暗い背景背景画像には明るい色で文字を書く」という文字が乗せられている](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/22333/6df7c1e9-3605-20cb-a752-8fd899ab6308.png)

コントラスト比の基準を満たすためには、背景画像を選んだりレイアウトを調整したりして、文字の周囲に文字の色とのコントラスト比が低くなる色がないように調整しなければなりません。難しさの伴う作業ではありますが、デザイナーがそういった作業をできる状況であればなんとかなります。

問題は、画像を選んだりレイアウトを調整したりできない場合です。たとえば、ユーザーがアップロードした画像に文字を乗せる場合に、どうやってコントラスト比の基準を満たしていると言える状態にできるでしょうか？

## 座布団を敷く

文字の部分にだけ背景色をつけることを「座布団を敷く」と言うことがあります。ユーザーがアップロードした画像に文字を乗せるような、背景画像にあわせて最適な色やレイアウトを選べないようなときには、座布団を敷くことで可読性を高められます。

![犬の写真の上に、白色で角を丸めた長方形が置かれ、その上に「文字の下に座布団を敷く」という文字が書かれている](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/22333/334d3c86-dbde-8d19-13f9-702502e556ef.png)


よくみるスタイルとして、座布団の背景色に半透明な色を使うものがあります。全面に敷いてある（つまり画像全体が明るくなったり暗くなったりする）場合もあります。これなら画像も見やすいです。

![子猫2匹の写真が左右に2枚配置されている。左側は座布団部分が半透明の黒色で、その上に「座布団を半透明にしたり」と書かれている。右側は全体が明るくなっていて、「全面に敷いたりできる」と書いてある](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/22333/787ab324-49b9-d771-9411-53250caf61cb.png)


半透明な背景色の座布団を使う場合、文字の周囲の色はどんな背景画像が選ばれるかによって変わります。その場合、確実にコントラスト比の基準を満たすことはできるでしょうか？

## 絶対にコントラスト比が確保できる色を見つける

WCAGの計算式では、R, G, Bの値をヒトの感じる明るさに近づくよう調整した「相対輝度」を求め、相対輝度の明るい方の色と暗い方の色を比較する形で求めます。計算式は、WCAGの[「コントラスト比」の定義](https://waic.jp/translations/WCAG22/#dfn-contrast-ratio)と[「相対輝度」の定義](https://waic.jp/translations/WCAG22/#dfn-relative-luminance)にあります。

相対輝度が最も明るい色は `#FFFFFF` で、最も暗い色は `#000000` です。座布団の背景色を半透明にする場合の、文字の周囲が最も明るくなる色と最も暗くなる色は、これらの上に座布団を敷いたときの色ということになります。この2色とのコントラスト比が充分になるよう、座布団の色と文字の色を選べば良いということになります。

たとえば、座布団の背景色が `rgba(0,0,0,0.6)` の場合は、以下のようになります。

- `#FFFFFF` の上に座布団を敷くと、`#666666`
- `#000000` の上に座布団を敷くと、`#000000`

この上に `#FFFFFF` の文字を置くのであれば、 `#666666` とのコントラスト比は5.74:1、`#000000` とのコントラスト比は 21:1 となります。つまり、どんな画像が来てもコントラスト比4.5:1以上という基準を満たすことができます。

以下の画像は、 `rgba(0,0,0,0.6)` の背景色をもつ座布団のサンプルです。文字は `#FFFFFF` で書かれています。

![真っ黒・真っ白・暗い色合いのモノクロ写真・雪景色のカラー写真の上に、黒い半透明の座布団を置いて「あのイーハトーヴォのすきとおった風」という白色の文字が書かれている](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/22333/87640e46-5565-70aa-4953-d566bc96b150.png)


座布団の背景色が `rgba(255,255,255, 0.4)` の場合は以下のようになります。

- `#FFFFFF` の上に座布団を敷くと、`#FFFFFF`
- `#000000` の上に座布団を敷くと、`#666666`

この場合、`#000000` で文字を置くと、背景画像に `#000000` の部分があるとき、その部分のコントラスト比は `#666666` との3.65:1となり、4.5:1以上の基準を満たすことができません。`#000000` よりも暗い色は存在しないため、 `rgba(255,255,255, 0.4)` の座布団では、背景画像が特定できない場合、コントラスト比4.5:1の基準を満たすことができないことがわかります。 

以下の画像は、 `rgba(255,255,255, 0.4)` の背景色をもつ座布団のサンプルです。文字は `#000000` で書かれています。

![真っ黒・真っ白・暗い色合いのモノクロ写真・雪景色のカラー写真の上に、白い半透明の座布団を置いて「あのイーハトーヴォのすきとおった風」という黒色の文字が書かれている](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/22333/fb8ff7d1-eebb-9245-e299-820b0bf216f6.png)

よく座布団に使われる、半透明にした黒と白に関しては、`#FFFFFF` と `#000000` の文字を置いたときにコントラスト比が4.5:1になる不透明度を憶えておくと便利です。

- 不透明度54%の黒（`rgba(0,0,0,0.54)`）は、 `#FFFFFF` に重ねると `#757575` となり、文字を `#FFFFFF` で書く場合、コントラスト比は 4.6:1 となります
- 不透明度46%の白（`rgba(255,255,255,0.46)`）は、`#000000` に重ねると `#757575` となり、文字を `#000000` で書く場合、コントラスト比は 4.55:1 となります
 
![真っ黒・真っ白・暗い色合いのモノクロ写真・雪景色のカラー写真の上に、「54%の黒」「46%の白」の文字が、座布団を敷いて置かれている](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/22333/c828d46b-94db-22cb-94b1-69637ecaa120.png)

これらは、あくまでギリギリで4.5:1の基準を満たすものでしかありません。私の感覚では、この色ではまだまだ文字を見づらく感じます。あくまでガイドラインを満たすことを確認できる数字なので、実際の画面デザインに取り入れる際はもっと不透明度の高い色を採用したほうが良いでしょう。