openameba/a11y-guidelines

カラーコントラストの基準のテスト・チェック方法の見直し

tokimari opened this issue · 1 comments

tokimari commented

概要 / Overview

Ameba内でSpindleが定着してきており、デザイン作成時や実装時にもほぼほぼSpindleのカラーパレットを使う運用になっています。
そのため、1.4.3 テキストや文字画像のコントラストを確保するのテスト・チェック方法もそれに則したものになっていて良いのではと思いました。
https://a11y-guidelines.ameba.design/1/4/3/#%E3%83%87%E3%82%B6%E3%82%A4%E3%83%B3%E6%99%82

デザイン時

UIデザインでは、基本的にSpindleカラーパレットのTheme Colorsを適切に組み合わせて使います。
UIデザイン以外の、例えば画像中のテキストのコントラストチェックなどには、Figmaのプラグインを別途使う方が良いでしょう（※ここはデザイナーさんに確認したい）。
というか、ここではまだSketch想定のままでしたね・・

実装時

実装時は基本的にUIデザインのマークアップなので、 https://github.com/openameba/ameba-color-palette.css を適切に利用している、とかで十分そうです。

Spindle、使っていればアクセシブル！

関連リンク / Related link

https://a11y-guidelines.ameba.design/1/4/3/#%E3%83%87%E3%82%B6%E3%82%A4%E3%83%B3%E6%99%82
https://spindle.ameba.design/styles/color/ui/

その他 / Others

No response

tokimari commented

「デザイン時」の項目はデザインチェックリストの見直しと合わせて行いたいので、時期を見てやるため、優先度は下げておきます:pray: