#ED6103との付き合い方

#ED6103 との向き合い方の話

わたくし そめ 株式会社LIFULL フロントエンドエンジニア アクセシビリティ推進の部署にいます 制作会社→制作会社→現職 https://x.com/_tsmd

• https://x.com/_tsmd

#ED6103 LIFULLのブランドカラーです。

3:1 をかろうじて上回る数値 通常サイズのテキストには使えない (SC 1.4.3) 非テキストコンテンツにならOK (SC 1.4.11) https://colourcontrast.cc/

• https://colourcontrast.cc/

どっちがクッキリ見える？ LIFULL HOME'Sは、 LIFULL HOME'Sは、 「叶えたい！が見えてくる。」をコンセプトに 「叶えたい！が見えてくる。」をコンセプトに 掲げる不動産・住宅情報サービスです。 掲げる不動産・住宅情報サービスです。 賃貸、一戸建て・マンションの購入、 賃貸、一戸建て・マンションの購入、 注文住宅から住まいの売却まで。 注文住宅から住まいの売却まで。 物件や住まい探しに役立つ情報を、 物件や住まい探しに役立つ情報を、 一人ひとりに寄り添い最適な形で提供することで、 一人ひとりに寄り添い最適な形で提供することで、 本当に叶えたい希望に気づき、 本当に叶えたい希望に気づき、 新たな暮らしの可能性を広げるお手伝いをします。 新たな暮らしの可能性を広げるお手伝いをします。 3.3 : 1 6.3 : 1

どうしたか？

WCAGは あきらめたw

APCA Accessible Perceptual Contrast Algorithm

WCAG 2.x コントラスト比計算方式の問題点 ● ● 人間の知覚的な特性を適切に反映しているといえない ○ ダークモード下では使い物にならない ○ 高彩度の背景上の明るいテキストが過小評価されてる テキストの「読みやすさ」について何も語っていない ○ コントラストと空間周波数と密接な関係がある

APCAの2大テーマ コントラスト計算 · WCAG 2と同様の 輝度コントラストベース · 知覚的な印象と近づくように補正 · 背景色と前景色の入れ替えで 数値が変動 コントラスト評価 · ルックアップテーブルにより好ましい 文字サイズ・ウェイトの基準を提供 · テキストの用途によって異なる コントラスト基準 · OK/NG の二値でない評価

APCAの2大テーマ コントラスト計算 コントラスト評価 · ルックアップテーブルにより好ましい · WCAG 2と同様の 輝度コントラストベース · 知覚的な印象と近づくように補正 · 背景色と前景色の入れ替えで 数値が変動 文字サイズ・ウェイトの基準を提供 · テキストの用途によって異なる コントラスト基準 · OK/NG の二値でない評価 採用 採用

https://lifull.github.io/accessibility-guidelines/

• https://lifull.github.io/accessibility-guidelines/

https://lifull.github.io/accessibility-guidelines/design-visual.html#text-contrast

• https://lifull.github.io/accessibility-guidelines/design-visual.html#text-contrast

https://lifull.github.io/accessibility-guidelines/design-visual.html#text-contrast

• https://lifull.github.io/accessibility-guidelines/design-visual.html#text-contrast

どっちがクッキリ見える？ LIFULL HOME'Sは、 LIFULL HOME'Sは、 「叶えたい！が見えてくる。」をコンセプトに 「叶えたい！が見えてくる。」をコンセプトに 掲げる不動産・住宅情報サービスです。 掲げる不動産・住宅情報サービスです。 賃貸、一戸建て・マンションの購入、 賃貸、一戸建て・マンションの購入、 注文住宅から住まいの売却まで。 注文住宅から住まいの売却まで。 物件や住まい探しに役立つ情報を、 物件や住まい探しに役立つ情報を、 一人ひとりに寄り添い最適な形で提供することで、 一人ひとりに寄り添い最適な形で提供することで、 本当に叶えたい希望に気づき、 本当に叶えたい希望に気づき、 新たな暮らしの可能性を広げるお手伝いをします。 新たな暮らしの可能性を広げるお手伝いをします。 Lc 65.2 Lc 44.3

これまでにやったこと ● アクセシビリティガイドラインで基準を策定 ● デザインガイドラインで同様の基準を推奨 ● Lighthouseによるアクセシビリティ評価をAPCA基準にする

LighthouseにAPCAを使って評価させる 部署のKPIにLighthouseの採点結果が含まれている。 WCAG基準でオレンジ色のテキスト全部を指摘されると良くない。 （それ以外のコントラスト問題が埋もれてしまうから。） Lighthouseが行うコントラスト比計算をAPCAに差し替えることは可能か？ → 容易には無理っぽい。 → Lighthouse CLIの出力結果から、APCAをパスしてる項目を除外する

excludeColorContrastException() { const audit = this.colorContrast; Lighthouse検査結果を受取る if (audit.score === 1) { return; } パスしてたら何もしない const items = audit.details.items.filter(item => { const contrast = Contrast.fromLighthouseColorContrastAudit(item) // Lc60以上はどの基準においてもpass // Lc45は文字サイズ18point以上か、太字で14文字以上の時はpass // ed6103とfffの組み合わせは特例で許可 if (contrast.isOverLc60 || contrast.isOverLc45WhenEnoughLetterSpec || contrast.isBrandColorOnWhite) { this.excludedColorContrastItems.push(item) return false; } APCA基準で検査しなおす return true; }); audit.details.items = items; if (items.length === 0) { audit.score = 1; } 検査しなおした結果を出力

悩んだこと ● 標準を逸脱するのは怖い ● 途上の技術を採用するのは怖い ● ルックアップテーブルを用いた運用は、できる気がしないし、 そもそもテーブルの見方がよくわからない

大事にしたこと ● 規格を満たすより、実利を重視すること ● 合意できる落としどころを決めること ● 100%の確信が得られなくても、信じて飛び込んでみること この判断が良かったか悪かったかはわかりません󰢛

APCAいろんな論点 ● WCAG 2.1とは非互換 ● リスクがあること ● ○ WCAG 3にAPCAが採用されないリスク ○ APCAの破壊的アップデートのリスク ○ CJK書体はまったく考慮されていない APCAのカバー範囲 ○ APCAは非テキストにも適用可能？ ○ APCAは単純な2色間のコントラストに対応してる？ ○ APCAは色覚特性に対応してる？

おわり ↑ AA failな文字も臆せず使っていくぅ！