#ED6103との付き合い方

6.8K Views

August 21, 23

スライド概要

オレンジ色のブランドカラーがアクセシビリティガイドラインの基準を満たさない問題にどのように対処しているのかの事例をご紹介します。

profile-image

LIFULL HOME'Sを運営する株式会社LIFULLのアカウントです。 LIFULLが主催するエンジニア向けイベント「Ltech」等で公開されたスライド等をこちらで共有しております。

シェア

埋め込む »CMSなどでJSが使えない場合

関連スライド

各ページのテキスト
1.

#ED6103 との向き合い方の話

2.

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

4.

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

5.

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

6.

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

7.

どうしたか?

8.

WCAGは あきらめたw

9.

APCA Accessible Perceptual Contrast Algorithm

10.

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

11.

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

12.

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

13.

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

14.

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

15.

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

16.

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

17.

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

18.

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

19.

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; } 検査しなおした結果を出力

20.

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

21.

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

22.

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

23.

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