Webデザインで文字と背景のコントラストを確かめる方法|読みやすさの基準と直し方

この記事でわかること

• 文字と背景のコントラスト比とは何か
• W3CのWCAGが定める基準(普通の文字・大きな文字・ボタンなど)
• コントラスト比を計算して確かめる方法と、架空の色で試した結果
• 足りないときの直し方と、色だけに頼らない工夫

Webデザインでは、色の組み合わせを見た目の好みで決めがちです。ただ、文字と背景の明るさの差が小さいと、読みにくくなる人がいます。この記事では、W3Cが定めるWebのアクセシビリティの指針(WCAG)の基準をもとに、文字と背景のコントラストを確かめる方法を紹介します。

この記事の基準と式は、W3CのWCAG 2.2と、その解説の資料で確かめた内容です。特定のツールやスクールは勧めず、法律で何が義務になるかは扱いません。

先に結論: 普通の文字は4.5:1以上を目安に、計算して確かめる

先に結論を書くと、普通の文字は背景とのコントラスト比を4.5:1以上、大きな文字やボタンの形は3:1以上にし、目で見て決めずに計算して確かめます。 計算した値は丸めません。

これはWCAGのレベルAAの基準です。より強い基準のレベルAAAでは、普通の文字が7:1以上、大きな文字が4.5:1以上です。

コントラスト比とは

WCAG 2.2では、コントラスト比を、明るいほうの色の相対輝度をL1、暗いほうをL2として、(L1 + 0.05) / (L2 + 0.05) で求めるとしています。相対輝度は、色の明るさを、一番暗い黒を0、一番明るい白を1として表した値です。

WCAG 2.2では、コントラスト比は1から21までの値になり、1:1から21:1のように書くとしています。黒と白の組み合わせが最大の21:1です。

WCAGの解説では、色の見え方に特性のある人にとって、色合いや鮮やかさは読みやすさにほとんど影響しないため、コントラストは色合いが大きな要素にならないように計算するとしています。つまり、「色が違うか」ではなく「明るさの差が足りるか」を見ます。

WCAGの基準を確かめる

WAIの説明では、WCAGの達成基準にはA・AA・AAAの3つのレベルがあります。文字のコントラストは、次の2つの達成基準で定められています。

• 1.4.3 コントラスト(最低限、レベルAA): WCAGの達成基準1.4.3では、文字と文字の画像のコントラスト比を少なくとも4.5:1にするとしています。大きな文字は3:1以上です
• 1.4.6 コントラスト(高度、レベルAAA): WCAGの達成基準1.4.6では、少なくとも7:1、大きな文字は4.5:1以上としています

大きな文字とは

WCAG 2.2では、大きな文字を、少なくとも18ポイント、または太字で14ポイントの大きさの文字としていて、中国語・日本語・韓国語の文字では同じ大きさに当たるものとしています。WCAGの解説では、14ポイントと18ポイントは、およそ18.5pxと24pxに当たるとしています。

要件がないもの

WCAGの達成基準1.4.3では、ロゴやブランド名の一部である文字には、コントラストの要件はないとしています。飾りだけの文字や、使えない状態の部品の文字も対象外です。ただし、WCAGの解説では、会社の配色の決まりでコントラストが足りない文字は、この例外に入らないとしています。

文字以外の部品も確かめる

文字だけでなく、ボタンや入力欄の枠、グラフの線なども確かめます。WCAGの達成基準1.4.11(レベルAA)では、画面の部品とその状態を見分けるのに必要な部分と、内容を理解するのに必要な図の部分は、隣り合う色とのコントラスト比を少なくとも3:1にするとしています。

色だけで伝えない

コントラストが足りていても、色の違いだけで意味を伝えると、伝わらない人がいます。WCAGの達成基準1.4.1(レベルA)では、色を、情報を伝えたり、操作を示したり、要素を見分けたりする唯一の視覚的な手段にしないとしています。

• 必須の項目: 赤い色だけでなく、「必須」と文字でも書く
• リンク: 色だけでなく、下線などでも本文と見分けられるようにする
• グラフ: 色だけでなく、線の形やラベルでも区別する

手順: コントラスト比を計算して確かめる

色は、目で見て決めずに計算して確かめます。WCAG 2.2の式を、そのままPythonで書くと次のようになります。

# WCAG 2.2 の相対輝度とコントラスト比の式
def channel(c8):
    c = c8 / 255
    return c / 12.92 if c <= 0.04045 else ((c + 0.055) / 1.055) ** 2.4

def luminance(hex_color):
    r, g, b = (int(hex_color[i:i + 2], 16) for i in (1, 3, 5))
    return 0.2126 * channel(r) + 0.7152 * channel(g) + 0.0722 * channel(b)

def contrast_ratio(color1, color2):
    l1, l2 = sorted((luminance(color1), luminance(color2)), reverse=True)
    return (l1 + 0.05) / (l2 + 0.05)

print(contrast_ratio("#767676", "#FFFFFF"))

色は、#の後に赤・緑・青を2桁ずつの16進数で書いた形(#767676など)で渡します。WCAG 2.2の相対輝度の定義では、赤・緑・青の値を0〜1にしてから明るさの感じ方に合わせて変換し、0.2126・0.7152・0.0722の重みで足し合わせるとしています。このコードは、その式をそのまま書いたものです。

架空の色で試した結果

白い背景(#FFFFFF)に、灰色や赤の文字を置いたとして、このコードで計算しました(小数第3位より下は切り捨てて書きます)。計算は、作業用のパソコンのPython 3.12.10で、記事のコードをそのまま実行して行いました。

• 黒(#000000): 21.00:1。最大の値です
• 灰色(#777777): 4.47:1。見た目は読めても、4.5:1に届きません
• 灰色(#767676): 4.54:1。#777777より少し暗いだけで、4.5:1を満たします
• 灰色(#595959): 7.00:1。レベルAAAの7:1も満たします
• 灰色(#999999): 2.84:1。大きな文字の3:1にも届きません
• 赤(#FF0000): 3.99:1。目立つ色ですが、普通の文字の4.5:1には届きません

16進数で1だけ違う#777777と#767676で、基準を満たすかどうかが分かれました。WCAGの解説では、3:1と4.5:1は境目の値として扱い、計算した値は丸めないとしていて、4.499:1は4.5:1を満たさない例に挙げています。

足りないときの直し方

コントラスト比が足りないときは、次の順で直します。

1. 文字を暗くする(背景が明るいとき): 色合いはそのままで、文字の色を少しずつ暗くして計算し直します
2. 背景を変える: 文字の色を変えられないときは、背景を明るくするか暗くします
3. 大きくする: 見出しなど、大きな文字にできるところは大きくすると、基準が3:1になります
4. 細い書体を避ける: WCAGの解説では、細い書体は画面ではもっと薄く表示されることがあり、太い線の書体を選ぶか、基準より大きな差にするのがよいとしています

確かめるときは、画面を目で見るのではなく、スタイルシートなどで指定した色の値を使います。WCAGの解説では、文字の表示のなめらかさの設定は利用者の側で変わるため、画面の見え方ではなく、指定された文字の色と背景の色を見るとしています。

自分で直すか、相談するかの判断

迷ったときは、「色を変えてよい範囲が決まっているか」で決めます。自分の作品やサイトなら、計算しながら色を直します。会社の配色の決まりがある仕事では、勝手に変えずに、計算した値を示して、決まりを作った人や依頼した人に相談します。

作品集に載せるときは、色を決めた理由とあわせて、コントラスト比を確かめたことを書くと、考えて作ったことが伝わります。作品の説明の書き方は、未経験からWebデザインのポートフォリオを作る手順で紹介しています。

つまずきやすいところ

• 目で見て決める: 自分には読めても、基準に届かないことがあります。計算して確かめます
• 値を丸める: 4.47:1のような値を、四捨五入して4.5:1とみなしません
• 色の違いだけで安心する: 赤と白のように目立つ組み合わせでも、明るさの差が足りないことがあります
• 背景の画像の上に文字を置く: 画像の明るい部分と暗い部分で、比が変わります。文字の後ろの一番条件の悪い部分で確かめます
• ボタンの枠や入力欄を忘れる: 文字以外の部品も、隣り合う色と3:1以上にします

まとめ

• コントラスト比は、2つの色の明るさの差を1:1から21:1で表した値です
• WCAGのレベルAAでは、普通の文字は4.5:1以上、大きな文字とボタン等の形は3:1以上です
• 目で見て決めずに計算して確かめ、計算した値は丸めません
• 足りないときは文字や背景の明るさを変え、色だけで意味を伝えないようにします

これからWebデザインを学ぶ順番は未経験からWebデザイナーになるには、独学とスクールの比べ方はWebデザインは独学とスクールのどちらで学ぶかで紹介しています。