signothecat
signothecat

文字色と背景色の組み合わせ生成

コントラスト比
--
(最小1:1、最大21:1)
text_fields
見出しに適しているか？
見出しの見やすさ
AA
--
AAA
--
text_fields
本文に適しているか？
本文の見やすさ
AA
--
AAA
--
16進数カラーコード
16進数カラーコード

ツール概要

文字色(前景色)と背景色を指定し、指定色におけるコントラスト比と、文字の可読性(見やすさ・読みやすさ)を確認できるツールです。

文字色と背景色はランダム生成もできるので、2色の組み合わせを探したいときにも使えます。

読みやすさ判定の仕組み

読みやすさ判定にはコントラスト比を用います。

AA(＝見やすい)、AAA(＝とても見やすい)、の2つのレベルで判定します。

アクセシビリティの観点では、まずはAAの達成を目指すのが一般的です。

AA・AAAで必要とされる文字色と背景色のコントラスト比は、以下の通りです。

AA AAA
見出し※ 3:1以上 4.5:1以上
本文 4.5:1以上 7:1以上
※18pt(約24px)以上の通常の太さのテキスト、または14pt(約18.66px)以上の太字のテキスト。

コントラスト比の算出方法

  1. HEX(16進数カラーコード)を、sRGBの0〜255の整数値に変換します。
    • #4caf50 なら、R = 76, G = 175, B = 80 となる
  2. sRGBの各値を0〜1に正規化し、それぞれr, g, bとします。
    • r = 76 / 255 ≈ 0.298
    • g = 175 / 255 ≈ 0.686
    • b = 80 / 255 ≈ 0.314
  3. sRGBをRGBにするため、r, g, bからr_lin, g_lin, b_linを出します。
    • r_lin = (r ≤ 0.04045) ? r / 12.92 : ((r + 0.055) / 1.055) ^ 2.4
    • g, bも同様に計算します。
    • 普段ディスプレイ上で見ているsRGB色空間では、RGB色空間に対してガンマ補正というものがかかっています。上の式でガンマ補正を取り除くことで、sRGB→RGBに変換します。
  4. 相対輝度Lを算出します。
    • L = 0.2126 × r_lin + 0.7152 × g_lin + 0.0722 × b_lin
  5. 2色のうち明るい方の色の相対輝度LをL1、暗い方の色の相対輝度LをL2として、コントラスト比を算出します。(1.00〜21.00の値の範囲)
    • コントラスト比 = (L1 + 0.05) / (L2 + 0.05)

参考リンク