PHP Conference Japan 2022 - 背景色を基に見やすい文字色を自動で選択させるために WCAG ガイドラインを使う

背景色と文字色の見やすさについて、なんとなく経験や見た目だけで判断していませんか？
デザイナーではないエンジニアだからデザインについて敬遠していませんか？

この LT では、W3C の Web Content Accessibility Guidelines Working Group のガイドラインを参考に、計算した数値を基に背景色に対して見やすさの指標を算出し判断する方法をご紹介します。

計算方法さえわかってしまえば、なぜ「赤 RGB(255,0,0)」は「白 RGB(255,255,255)」や「黒 RGB(0,0,0)」どちらとも相性が悪いのか？数値を基に分かるようになります。

最後に、この LT を通じて WCAG ガイドラインを参考に、エンジニアもより良いデザインを体系的に学ぶきっかけになれば幸いです。

Transcript

1. @maikeru (mikumo)
   背景色を基に見やすい文字色を
   自動で選択させるために
   WCAG ガイドラインを使う
   超高速LT
   

   View Slide

2. @maikeru (mikumo)
   自己紹介✍
   三雲 勇二 / mikumo
   プライム・ストラテジー株式会社 所属
   ・KUSANAGI / WEXAL (WordPress などフレームワーク高速化)
   ・ハイパーオートメーション (自動化やAIなど)
   ・PRIME STUDY (PHPの模擬試験あります)
   PHP技術者認定機構 エバンジェリスト
   ・PHP試験のコラムを毎月書いてます
   ・来年春公開予定の新試験「PHP8初級」の監修
   

   View Slide

3. @maikeru (mikumo)
   デザイン、
   感覚でやってませんか？
   

   View Slide

4. @maikeru (mikumo)
   ということで、
   「文字の見やすさ」を例に考えます。
   

   View Slide

5. @maikeru (mikumo)
   そもそも見やすい文字とは？
   

   View Slide

6. @maikeru (mikumo)
   そもそも見やすい文字とは？
   PHP PHP
   PHP PHP
   PHP PHP
   PHP PHP
   PHP PHP
   

   View Slide

7. @maikeru (mikumo)
   見やすい文字を選ぶ基準
   「コントラスト」
   

   View Slide

8. @maikeru (mikumo)
   コントラストをどう導くのか
   Web Content Accessibility Guidelines (WCAG) 2.0 は、ウェ
   ブコンテンツをよりアクセシブルにするための広範囲に及ぶ推奨
   事項を網羅している。 (中略)
   ⼜、このガイドラインに従うと、多くの場合、ほとんどの利⽤者にとって
   ウェブコンテンツがより使いやすくなる。
   § WCAG 2.0 ⽇本語翻訳版 https://waic.jp/docs/WCAG20/Overview.html
   § WCAG 2.0 上記の原⽂ https://www.w3.org/TR/2008/REC-WCAG20-20081211/
   § 最新版 WCAG 2.2 https://www.w3.org/TR/WCAG22/
   

   View Slide

9. @maikeru (mikumo)
   コントラスト
   WCAG 2.0
   G17: テキスト (及び⽂字画像) とその背景の間に、
   少なくとも 7:1 のコントラスト⽐を確保する
   § WCAG 2.0 G17: テキスト (及び⽂字画像) とその背景の間に、少なくとも 7:1 のコントラスト⽐を確保する
   https://waic.jp/docs/WCAG-TECHS/G17.html
   

   View Slide

10. @maikeru (mikumo)
    コントラストの計算
    

    View Slide

11. @maikeru (mikumo)
    コントラストを計算: 相対輝度
    § WCAG 2.0 G17: テキスト (及び⽂字画像) とその背景の間に、少なくとも 7:1 のコントラスト⽐を確保する
    https://waic.jp/docs/WCAG-TECHS/G17.html
    𝐶𝑠𝑅𝐺𝐵
    ≤ 0.03928 の場合
    [True] 𝐶 = !
    !"#$
    "#.%#
    [False] 𝐶 = !
    !"#$
    &'.'((
    ".'((
    exp 2.4
    𝐶𝑠𝑅𝐺𝐵
    =
    𝐶8𝑏𝑖𝑡
    255
    𝐶𝑠𝑅𝐺𝐵
    , 𝐶 は 𝑅𝐺𝐵 それぞれ当てはめた計算
    相対輝度 𝐿 = 0.2126×𝑅 + 0.7152×𝐺 + 0.0722×𝐵
    

    View Slide

12. @maikeru (mikumo)
    コントラストを計算: 相対輝度
    // RGB から相対輝度に変更
    function relativeLuminance(int $r, int $g, int $b): float
    {
    $to_srgb = function (int $byte): float {
    $srgb = (float) $byte / 255;
    return $srgb <= 0.03928 ? $srgb / 12.92 : (($srgb + 0.055) / 1.055) ** 2.4;
    };
    return 0.2126 * $to_srgb($r) + 0.7152 * $to_srgb($g) + 0.0722 * $to_srgb($b);
    }
    § WCAG 2.0 G17: テキスト (及び⽂字画像) とその背景の間に、少なくとも 7:1 のコントラスト⽐を確保する
    https://waic.jp/docs/WCAG-TECHS/G17.html
    

    View Slide

13. @maikeru (mikumo)
    コントラストを計算: 相対輝度比率
    § WCAG 2.0 G17: テキスト (及び⽂字画像) とその背景の間に、少なくとも 7:1 のコントラスト⽐を確保する
    https://waic.jp/docs/WCAG-TECHS/G17.html
    相対輝度⽐率 コントラスト⽐ =
    𝐿1 + 0.05
    𝐿2 + 0.05
    上記の⽐率が 7:1 以上で⾒やすいコントラスト⽐
    L1: 前景⾊/背景⾊のうち明るい⽅の相対輝度
    L2: 前景⾊/背景⾊のうち暗い⽅の相対輝度
    

    View Slide

14. @maikeru (mikumo)
    コントラストを計算: 相対輝度比率
    // 相対輝度比率
    function relativeLuminanceRatio(float $L1, float $L2): float
    {
    return (max($L1, $L2) + 0.05) / (min($L1, $L2) + 0.05);
    }
    § WCAG 2.0 G17: テキスト (及び⽂字画像) とその背景の間に、少なくとも 7:1 のコントラスト⽐を確保する
    https://waic.jp/docs/WCAG-TECHS/G17.html
    

    View Slide

15. @maikeru (mikumo)
    コントラストを計算: 相対輝度の値
    0.0 1.0
    #000000
    L=0.0
    BW #FFFFFF
    L=1.0
    BW
    #FF0000
    L=0.2126
    BW #00FF00
    L=0.7152
    BW
    #00FF00
    L=0.0722
    BW #FFFF00
    L=0.9278
    BW
    #FF00FF
    L=0.2848
    BW #00FFFF
    L=0.7874
    BW
    ⽩⽂字が⾒やすい ⿊⽂字が⾒やすい
    

    View Slide

16. @maikeru (mikumo)
    数直線上で
    白文字と黒文字の
    見やすい境界値があるはず…
    

    View Slide

17. @maikeru (mikumo)
    コントラストを計算: 相対輝度の値
    0.0 1.0
    #000000
    L=0.0
    BW #FFFFFF
    L=1.0
    BW
    #FF0000
    L=0.2126
    BW #00FF00
    L=0.7152
    BW
    #00FF00
    L=0.0722
    BW #FFFF00
    L=0.9278
    BW
    #FF00FF
    L=0.2848
    BW #00FFFF
    L=0.7874
    BW
    ⽩⽂字が⾒やすい ⿊⽂字が⾒やすい
    境界値があるはず…
    

    View Slide

18. @maikeru (mikumo)
    ということで計算します。
    

    View Slide

19. @maikeru (mikumo)
    相対輝度: 白文字と黒文字の境界値
    •背景⾊の相対輝度を x とおく
    •背景⾊の相対輝度と⽩⽂字の相対輝度の⽐率は (1 + 0.05) / (x + 0.05)
    •背景⾊の相対輝度と⿊⽂字の相対輝度の⽐率は (x + 0.05) / (0 + 0.05)
    1 + 0.05
    𝑥 + 0.05
    =
    𝑥 + 0.05
    0 + 0.05
    

    View Slide

20. @maikeru (mikumo)
    相対輝度: 白文字と黒文字の境界値
    1 + 0.05
    𝑥 + 0.05
    =
    𝑥 + 0.05
    0 + 0.05
    

    View Slide

21. @maikeru (mikumo)
    相対輝度: 白文字と黒文字の境界値
    1 + 0.05
    𝑥 + 0.05
    =
    𝑥 + 0.05
    0 + 0.05
    𝑥 + 0.05 2 = 1.05×0.05
    

    View Slide

22. @maikeru (mikumo)
    相対輝度: 白文字と黒文字の境界値
    1 + 0.05
    𝑥 + 0.05
    =
    𝑥 + 0.05
    0 + 0.05
    𝑥 + 0.05 2 = 1.05×0.05
    𝑥2 + 2×0.05×𝑥 + 0.025 = 0.0525
    

    View Slide

23. @maikeru (mikumo)
    相対輝度: 白文字と黒文字の境界値
    1 + 0.05
    𝑥 + 0.05
    =
    𝑥 + 0.05
    0 + 0.05
    𝑥 + 0.05 2 = 1.05×0.05
    𝑥2 + 2×0.05×𝑥 + 0.025 = 0.0525
    𝑥2 + 0.1𝑥 − 0.05 = 0
    

    View Slide

24. @maikeru (mikumo)
    相対輝度: 白文字と黒文字の境界値
    1 + 0.05
    𝑥 + 0.05
    =
    𝑥 + 0.05
    0 + 0.05
    𝑥 + 0.05 2 = 1.05×0.05
    𝑥2 + 2×0.05×𝑥 + 0.025 = 0.0525
    𝑥2 + 0.1𝑥 − 0.05 = 0 2次⽅程式
    𝑎𝑥2 + 𝑏𝑥 + 𝑐 = 0 (𝑎≠0)
    

    View Slide

25. @maikeru (mikumo)
    相対輝度: 白文字と黒文字の境界値
    𝑥# + 0.1𝑥 − 0.05 = 0 2次⽅程式の解の公式
    𝑥 =
    −𝑏 ± 𝑏! − 4𝑎𝑐
    2𝑎
    

    View Slide

26. @maikeru (mikumo)
    相対輝度: 白文字と黒文字の境界値
    𝑥# + 0.1𝑥 − 0.05 = 0 2次⽅程式の解の公式
    𝑥 =
    −𝑏 ± 𝑏! − 4𝑎𝑐
    2𝑎
    𝑥 =
    −0.1 ± 0.1# − 4×1×−0.05
    2×1
    

    View Slide

27. @maikeru (mikumo)
    相対輝度: 白文字と黒文字の境界値
    𝑥# + 0.1𝑥 − 0.05 = 0 2次⽅程式の解の公式
    𝑥 =
    −𝑏 ± 𝑏! − 4𝑎𝑐
    2𝑎
    𝑥 =
    −0.1 ± 0.1# − 4×1×−0.05
    2×1
    𝑥 = −0.05 ±
    0.21
    2
    

    View Slide

28. @maikeru (mikumo)
    相対輝度: 白文字と黒文字の境界値
    𝑥# + 0.1𝑥 − 0.05 = 0 2次⽅程式の解の公式
    𝑥 =
    −𝑏 ± 𝑏! − 4𝑎𝑐
    2𝑎
    𝑥 =
    −0.1 ± 0.1# − 4×1×−0.05
    2×1
    𝑥 = −0.05 ±
    0.21
    2
    𝑥 ≈ +0.17912878474779…
    −0.27912878474779…
    

    View Slide

29. @maikeru (mikumo)
    相対輝度: 白文字と黒文字の境界値
    𝑥# + 0.1𝑥 − 0.05 = 0 2次⽅程式の解の公式
    𝑥 =
    −𝑏 ± 𝑏! − 4𝑎𝑐
    2𝑎
    𝑥 =
    −0.1 ± 0.1# − 4×1×−0.05
    2×1
    𝑥 = −0.05 ±
    0.21
    2
    𝑥 ≈ +0.17912878474779…
    −0.27912878474779…
    相対輝度は 0〜1
    だから+の値が境界値
    𝑥 = −0.05 +
    0.21
    2
    

    View Slide

30. @maikeru (mikumo)
    相対輝度: 白文字と黒文字の境界値
    0.0 1.0
    #000000
    L=0.0
    BW #FFFFFF
    L=1.0
    BW
    #FF0000
    L=0.2126
    BW #00FF00
    L=0.7152
    BW
    #00FF00
    L=0.0722
    BW #FFFF00
    L=0.9278
    BW
    #FF00FF
    L=0.2848
    BW #00FFFF
    L=0.7874
    BW
    ⽩⽂字 ⿊⽂字が⾒やすい
    境界値: L=0.1791…
    

    View Slide

31. @maikeru (mikumo)
    コントラストを計算
    // 黒文字と白文字の判定に使う相対輝度境界値(近似値)
    const RELATIVE_LUMINANCE_BORDER = 0.17912878474779;
    // 黒文字もしくは白文字
    function chooseTextColor (int $r, int $g, int $b): string
    {
    $background = relativeLuminance($r, $g, $b);
    // 背景色の相対輝度が境界値以上なら黒文字、未満なら白文字
    return $background >= RELATIVE_LUMINANCE_BORDER ? 'black' : 'white';
    }
    § WCAG 2.0 G17: テキスト (及び⽂字画像) とその背景の間に、少なくとも 7:1 のコントラスト⽐を確保する
    https://waic.jp/docs/WCAG-TECHS/G17.html
    

    View Slide

32. @maikeru (mikumo)
    あと、
    白文字でも黒文字でも
    見にくい色ってない？
    

    View Slide

33. @maikeru (mikumo)
    コントラストを計算
    WCAG 2.0
    G17: テキスト (及び⽂字画像) とその背景の間に、
    少なくとも 7:1 のコントラスト⽐を確保する
    § WCAG 2.0 G17: テキスト (及び⽂字画像) とその背景の間に、少なくとも 7:1 のコントラスト⽐を確保する
    https://waic.jp/docs/WCAG-TECHS/G17.html
    

    View Slide

34. @maikeru (mikumo)
    相対輝度比率: 7.0以上になる条件
    •背景⾊の相対輝度を x とおく
    •背景⾊の相対輝度と⽩⽂字の相対輝度の⽐率は (1 + 0.05) / (x + 0.05)
    •背景⾊の相対輝度と⿊⽂字の相対輝度の⽐率は (x + 0.05) / (0 + 0.05)
    ⿊⽂字
    7.0 ≤
    𝑥 + 0.05
    0 + 0.05
    ⽩⽂字
    7.0 ≤
    1 + 0.05
    𝑥 + 0.05
    

    View Slide

35. @maikeru (mikumo)
    ということで計算します。
    

    View Slide

36. @maikeru (mikumo)
    相対輝度比率: 7.0以上になる条件
    ⿊⽂字
    7.0 ≤
    𝑥 + 0.05
    0 + 0.05
    ⽩⽂字
    7.0 ≤
    1 + 0.05
    𝑥 + 0.05
    

    View Slide

37. @maikeru (mikumo)
    相対輝度比率: 7.0以上になる条件
    ⿊⽂字
    7.0 ≤
    𝑥 + 0.05
    0 + 0.05
    ⽩⽂字
    7.0 ≤
    1 + 0.05
    𝑥 + 0.05
    7.0(𝑥 + 0.05) ≤ 1.05 7.0(0 + 0.05) ≤ 𝑥 + 0.05
    

    View Slide

38. @maikeru (mikumo)
    相対輝度比率: 7.0以上になる条件
    ⿊⽂字
    7.0 ≤
    𝑥 + 0.05
    0 + 0.05
    ⽩⽂字
    7.0 ≤
    1 + 0.05
    𝑥 + 0.05
    7.0(𝑥 + 0.05) ≤ 1.05
    7𝑥 ≤ 0.7
    7.0(0 + 0.05) ≤ 𝑥 + 0.05
    0.35 − 0.05 ≤ 𝑥
    

    View Slide

39. @maikeru (mikumo)
    相対輝度比率: 7.0以上になる条件
    ⿊⽂字
    7.0 ≤
    𝑥 + 0.05
    0 + 0.05
    ⽩⽂字
    7.0 ≤
    1 + 0.05
    𝑥 + 0.05
    7.0(𝑥 + 0.05) ≤ 1.05
    7𝑥 ≤ 0.7
    𝑥 ≤ 0.1
    7.0(0 + 0.05) ≤ 𝑥 + 0.05
    0.35 − 0.05 ≤ 𝑥
    𝑥 ≥ 0.3
    

    View Slide

40. @maikeru (mikumo)
    相対輝度比率: 7.0以上になる条件
    0.0 1.0
    #FFFFFF
    L=1.0
    BW
    #00FF00
    L=0.7152
    BW
    #FFFF00
    L=0.9278
    BW
    #00FFFF
    L=0.7874
    BW
    ⽩⽂字 ⿊⽂字
    境界値:
    L=0.1791…
    #000000
    L=0.0
    BW #FF0000
    L=0.2126
    BW
    #00FF00
    L=0.0722
    BW #FF00FF
    L=0.2848
    BW
    0.1 0.3
    ⾒にくい範囲
    

    View Slide

41. @maikeru (mikumo)
    まとめ
    

    View Slide

42. @maikeru (mikumo)
    まとめ
    • デザインは感覚ではなく、きちんと定義できるものが多い。
    • 気になったものを少し深堀りすると新たな知⾒につながる。
    • (⼈⽣で『２次⽅程式』使うね。)
    • (スライドは際限なく増えるね。)
    

    View Slide

43. @maikeru (mikumo)
    ありがとうございました
    

    View Slide