文字の色と背景色の間には、一定以上のコントラスト（明るさの差）がなければ、文字の可読性が低くなります。特に老眼や弱視など、見えづらさを抱えている人は、文字の色のコントラスト比の低さの影響を受けやすくなります。
WCAGにはコントラストについていくつかの基準がありますが、最も意識される頻度が高いのは1.4.3 コントラスト (最低限)（レベルAA）に登場する4.5:1というコントラスト比の数字でしょう。文字が大きいときは、とか、レベルAAAでは、という話は一旦置いておきましょう。
WCAGの基準で使われるコントラスト比は、文字の色と背景色のカラーコードをWebAIM Contrast Checkerなどに入力することで計算できます。
背景に画像がある場合のコントラスト比
背景に画像がある場合には、コントラスト比の計算が面倒くさくなります。文字の周囲で最も明るい、もしくは最も暗い色を特定して、その色が文字の色と十分なコントラスト比となっているか……ということを考えなければなりません。
コントラスト比の基準を満たすためには、背景画像を選んだりレイアウトを調整したりして、文字の周囲に文字の色とのコントラスト比が低くなる色がないように調整しなければなりません。難しさの伴う作業ではありますが、デザイナーがそういった作業をできる状況であればなんとかなります。
問題は、画像を選んだりレイアウトを調整したりできない場合です。たとえば、ユーザーがアップロードした画像に文字を乗せる場合に、どうやってコントラスト比の基準を満たしていると言える状態にできるでしょうか？
座布団を敷く
文字の部分にだけ背景色をつけることを「座布団を敷く」と言うことがあります。ユーザーがアップロードした画像に文字を乗せるような、背景画像にあわせて最適な色やレイアウトを選べないようなときには、座布団を敷くことで可読性を高められます。
よくみるスタイルとして、座布団の背景色に半透明な色を使うものがあります。全面に敷いてある（つまり画像全体が明るくなったり暗くなったりする）場合もあります。これなら画像も見やすいです。
半透明な背景色の座布団を使う場合、文字の周囲の色はどんな背景画像が選ばれるかによって変わります。その場合、確実にコントラスト比の基準を満たすことはできるでしょうか？
絶対にコントラスト比が確保できる色を見つける
WCAGの計算式では、R, G, Bの値をヒトの感じる明るさに近づくよう調整した「相対輝度」を求め、相対輝度の明るい方の色と暗い方の色を比較する形で求めます。計算式は、WCAGの「コントラスト比」の定義と「相対輝度」の定義にあります。
相対輝度が最も明るい色は #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 で書かれています。
座布団の背景色が 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 で書かれています。
よく座布団に使われる、半透明にした黒と白に関しては、#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 となります
これらは、あくまでギリギリで4.5:1の基準を満たすものでしかありません。私の感覚では、この色ではまだまだ文字を見づらく感じます。あくまでガイドラインを満たすことを確認できる数字なので、実際の画面デザインに取り入れる際はもっと不透明度の高い色を採用したほうが良いでしょう。