Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Open
tokimari opened this issue Jul 13, 2023 · 1 comment
Labels

Comments

@tokimari
Copy link
Contributor

概要 / 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
Copy link
Contributor Author

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Projects
None yet
Development

No branches or pull requests

1 participant