色価の話 アンリ・マティスからWebアクセシビリティの話

色価の話 アンリ・マティスから Webアクセシビリティの話

ぶんぶん ● 普段はUnityプログラマーやってま す ● 趣味で絵を描いてます 2

絵の話 3

この絵、色がなにか変 …？ ● アンリ・マティスの「グリーンストライプ」 ● 大胆な色使いが「あたかも野獣（フォーヴ、 fauves）の檻の中にいるようだ」と評されて野獣派 （フォービズム）と言われる 引 用:https://en.wikipedia.org/wiki/The_Green_Stripe#/media/File:Matisse_-_G reen_Line.jpeg 4

白黒にすると ● 実はコントラストだけに着目するとまとまっている 5

色価（ヴァルール）とは ● （諸説あるけど雑に言えば）色自体が持つ濃さ ● 色の三要素（色相・明度・彩度）の総合で決まる ● 写真の台頭でそれまで写実を目指してきた絵の価値が揺らぐ ○ もっと自由な画家の感覚で色を使おうとしたのがフォービズム ○ アンリ・マティスは色価に着目して「グリーンストライプ」を描いた 6

Webと何が関係ある？ 7

こんなケース ● カテゴリを示すボタンを動的に作って〜 ● 色は良い感じにして〜 明度と彩度を固定して色相だけ変化させれば良い感じになる んじゃね？ 8

良い感じになった…？ 9

ここらへん見づらくね…？ 10

白黒にすると黄色〜緑あたりが薄い 11

WCAGのコントラスト比達成基準 ● WCAG（Web Content Accessibility Guidelines）2.2では文字と背景 色のコントラスト比が最低限 4.5:1 を満たすことを求められている ● この根拠は細かく書いてあって面白いので読んでみてください ○ https://waic.jp/translations/UNDERSTANDING-WCAG20/vi sual-audio-contrast-contrast.html 12

• https://waic.jp/translations/UNDERSTANDING-WCAG20/visual-audio-contrast-contrast.html

紫は満たしてるけど緑はアウト 13

じゃあどうやって色を選ぶ？ ● OKLCH色空間を使おう ● 色価を一定に保ちながら色を選択できます 14

OKLCHカラーピッカー 15

CSSにも関数があります 16

まとめ ● 色には色自体が持つ濃さ「色価」がある ○ 色価は色相・明度・彩度の総合で決まる ● 明度と彩度固定で色を動的生成すると色相によって見にくくなってしまう ○ WCAGのガイドラインを満たさなくなる場合も ● OKLCH色空間を使うとコントラストを揃えて色を選べる 17

参考になりそうなやつ ● WCAGのコントラスト比達成基準 ○ https://waic.jp/translations/UNDERSTANDING-WCAG20/visual-audiocontrast-contrast.html ● ● パク・リノ「光と色のチュートリアル」 ○ 色価をどう扱うか丁寧に解説してます ○ https://www.maar.com/shop/comic/comic-howto/isbn9784837308201 OKLCH カラーピッカー ○ ● https://oklch.com/ 美術解説するぞー のアンリ・マティスの解説 ○ https://www.youtube.com/watch?v=3PKyTPOO0FY 18

• https://waic.jp/translations/UNDERSTANDING-WCAG20/visual-audio-contrast-contrast.html
• https://www.maar.com/shop/comic/comic-howto/isbn9784837308201
• https://oklch.com/
• https://www.youtube.com/watch?v=3PKyTPOO0FY