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
2. @maikeru (mikumo) 自己紹介✍ 三雲 勇二 / mikumo プライム・ストラテジー株式会社 所属 ・KUSANAGI / WEXAL (WordPress などフレームワーク高速化) ・ハイパーオートメーション (自動化やAIなど) ・PRIME STUDY (PHPの模擬試験あります) PHP技術者認定機構 エバンジェリスト ・PHP試験のコラムを毎月書いてます ・来年春公開予定の新試験「PHP8初級」の監修
3. @maikeru (mikumo) デザイン、 感覚でやってませんか？
4. @maikeru (mikumo) ということで、 「文字の見やすさ」を例に考えます。
5. @maikeru (mikumo) そもそも見やすい文字とは？
6. @maikeru (mikumo) そもそも見やすい文字とは？ PHP PHP PHP PHP PHP PHP PHP PHP PHP PHP
7. @maikeru (mikumo) 見やすい文字を選ぶ基準 「コントラスト」
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/
9. @maikeru (mikumo) コントラスト WCAG 2.0 G17: テキスト (及び⽂字画像) とその背景の間に、 少なくとも 7:1 のコントラスト⽐を確保する § WCAG 2.0 G17: テキスト (及び⽂字画像) とその背景の間に、少なくとも 7:1 のコントラスト⽐を確保する https://waic.jp/docs/WCAG-TECHS/G17.html
10. @maikeru (mikumo) コントラストの計算
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×𝐵
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
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: 前景⾊/背景⾊のうち暗い⽅の相対輝度
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
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 ⽩⽂字が⾒やすい ⿊⽂字が⾒やすい
16. @maikeru (mikumo) 数直線上で 白文字と黒文字の 見やすい境界値があるはず…
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 ⽩⽂字が⾒やすい ⿊⽂字が⾒やすい 境界値があるはず…
18. @maikeru (mikumo) ということで計算します。
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
20. @maikeru (mikumo) 相対輝度: 白文字と黒文字の境界値 1 + 0.05 𝑥 + 0.05 = 𝑥 + 0.05 0 + 0.05
21. @maikeru (mikumo) 相対輝度: 白文字と黒文字の境界値 1 + 0.05 𝑥 + 0.05 = 𝑥 + 0.05 0 + 0.05 𝑥 + 0.05 2 = 1.05×0.05
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
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
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)
25. @maikeru (mikumo) 相対輝度: 白文字と黒文字の境界値 𝑥# + 0.1𝑥 − 0.05 = 0 2次⽅程式の解の公式 𝑥 = −𝑏 ± 𝑏! − 4𝑎𝑐 2𝑎
26. @maikeru (mikumo) 相対輝度: 白文字と黒文字の境界値 𝑥# + 0.1𝑥 − 0.05 = 0 2次⽅程式の解の公式 𝑥 = −𝑏 ± 𝑏! − 4𝑎𝑐 2𝑎 𝑥 = −0.1 ± 0.1# − 4×1×−0.05 2×1
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
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…
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
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…
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
32. @maikeru (mikumo) あと、 白文字でも黒文字でも 見にくい色ってない？
33. @maikeru (mikumo) コントラストを計算 WCAG 2.0 G17: テキスト (及び⽂字画像) とその背景の間に、 少なくとも 7:1 のコントラスト⽐を確保する § WCAG 2.0 G17: テキスト (及び⽂字画像) とその背景の間に、少なくとも 7:1 のコントラスト⽐を確保する https://waic.jp/docs/WCAG-TECHS/G17.html
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
35. @maikeru (mikumo) ということで計算します。
36. @maikeru (mikumo) 相対輝度比率: 7.0以上になる条件 ⿊⽂字 7.0 ≤ 𝑥 + 0.05 0 + 0.05 ⽩⽂字 7.0 ≤ 1 + 0.05 𝑥 + 0.05
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
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 ≤ 𝑥
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
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 ⾒にくい範囲
41. @maikeru (mikumo) まとめ
42. @maikeru (mikumo) まとめ • デザインは感覚ではなく、きちんと定義できるものが多い。 • 気になったものを少し深堀りすると新たな知⾒につながる。 • (⼈⽣で『２次⽅程式』使うね。) • (スライドは際限なく増えるね。)
43. @maikeru (mikumo) ありがとうございました