コントラスト比をどこまで守るべきか
下記サイトで、いつもチェックしながら色を選ぶようにしています。https://webaim.org/resources/contrastchecker/
画面上では読める、理解できるものもコントラストチェッカーでアウトなら、絶対に使わないほうがいいのでしょうか。
全て従って作った際に、やや重い印象の仕上がりになったり、せっかくいい色なのになと残念に思うときがあります。
どこまで守るのがセオリーなのか知りたいです。
1. 絶対的なルールではないが、極端に微妙だと普通に使いづらい
2. AAAとAAがある
3. ユーザー層で判断
4. 読めないと意味がないもの、と、装飾
5. コントラストチェッカーはFigmaプラグインのほうが楽かも
コントラスト比は基準であり、絶対的なルールではないので必ずしも守らないといけないわけではありません。使うユーザー像や目的によると思います。後述する”AAA or AA" なのか、"ユーザーとその目的はなんなのか”、でどの基準まで守るべきかを考える必要があると思います。
じゃあ何も考えなくていいのか？というとそういうわけではなく、BONOでよく見る色使いの間違いとしては”オシャレさを意識して文字が読めない”し、結果として”オシャレでもない不安定な見た目になっている”ものがあります。これはそもそもの、普通に守ると見た目も機能性も良くなるよね、という基準を分からずに適用しているケース、つまり”ふつうパターンの欠如”です。
参考記事：基礎を身につけるために真似しよう
https://www.bo-no.design/contents/howtostudydesign-steal
なので、まずは世の中の”良いUI（特に海外で日本にもローカライズされていて、見た目が良いもの）”を真似してどういう色、どれぐらいのコントラスト比か？を知っていくと良い気がします。
おそらく”重い仕上がりになる”というのAAAのランクのコントラスト比を保った結果なのかな？と思います。
”重い表現になる”と書いているので、おそらくAAAの基準で作ったのかなと思います。
• **AA（標準レベル）**：一般の人が快適に読めるレベル（4.5:1）
• **AAA（高レベル）**：視覚障害者や高齢者にもより読みやすいレベル（7:1）
基本的にはAAを目指すと、普通に読めるし、UIでふつうとしていろんなサービスが適用しているような、色の濃さになると思います。
またサイトの目的やユーザー像で判断して基準を考えていく必要もあると考えています。
例えば**AAで進めてもOKなケース**はこんな感じがあるかなと思います。
✅ 一般的なウェブサイトやアプリ
→ SNS、ブログ、ECサイト、企業サイト、SaaSなど、多くの人が利用するデジタルプロダクトならAA基準が一般的だと思います。
✅ ブランドの世界観やデザインのバランスを考慮したい場合
→ AA基準を守りつつ、デザイン性とのバランスを取りたいなら、AAAまで無理にこだわる必要はない。機能は担保されなくても”伝われば”良いという目的のため（ただ文字が読めないと伝わらないのなら文字は読める状態であるべき）
AAAで進めるべきケースは以下のような例があるかなと思います
⚠ 高齢者や視覚障害者向けのサービス
→ AAA基準を満たしていないと、ユーザーに視力的に読みにくくなる可能性が高いと思います。
⚠ **公的機関や教育・医療系のサービス**
→ 公共性が高いサービスは、アクセシビリティへの配慮が求められる。誰でも使えないといけない。
ECサイトでも高齢者が使うものであるなら、AAAを目指すことを考えた方がサイトの目的を達成できることもあるでしょう。
この辺りはユーザー層を考えて判断していく必要があります。
もし添付したようなサイトで毎回チェックしていて、Figmaで作業しているなら、Figmaのプラグインを使う方が確認が早いと思います。自分で検索して見つけてもいいですし、以下のようなプラグインを使ってみるのが良いかもです！
Stark - Contrast & Accessibility Checker
https://www.figma.com/community/plugin/732603254453395948/stark-contrast-accessibility-checker
※FigmaPlugin調べるときは、英語キーワードで調べると良かったりします。
質問はこちらのページのフォームから！
https://www.bo-no.design/question
コントラスト比をどこまで守るべきか
下記サイトで、いつもチェックしながら色を選ぶようにしています。https://webaim.org/resources/contrastchecker/
画面上では読める、理解できるものもコントラストチェッカーでアウトなら、絶対に使わないほうがいいのでしょうか。
全て従って作った際に、やや重い印象の仕上がりになったり、せっかくいい色なのになと残念に思うときがあります。
どこまで守るのがセオリーなのか知りたいです。
1. 絶対的なルールではないが、極端に微妙だと普通に使いづらい
2. AAAとAAがある
3. ユーザー層で判断
4. 読めないと意味がないもの、と、装飾
5. コントラストチェッカーはFigmaプラグインのほうが楽かも
コントラスト比は基準であり、絶対的なルールではないので必ずしも守らないといけないわけではありません。使うユーザー像や目的によると思います。後述する”AAA or AA" なのか、"ユーザーとその目的はなんなのか”、でどの基準まで守るべきかを考える必要があると思います。
じゃあ何も考えなくていいのか？というとそういうわけではなく、BONOでよく見る色使いの間違いとしては”オシャレさを意識して文字が読めない”し、結果として”オシャレでもない不安定な見た目になっている”ものがあります。これはそもそもの、普通に守ると見た目も機能性も良くなるよね、という基準を分からずに適用しているケース、つまり”ふつうパターンの欠如”です。
参考記事：基礎を身につけるために真似しよう
https://www.bo-no.design/contents/howtostudydesign-steal
なので、まずは世の中の”良いUI（特に海外で日本にもローカライズされていて、見た目が良いもの）”を真似してどういう色、どれぐらいのコントラスト比か？を知っていくと良い気がします。
おそらく”重い仕上がりになる”というのAAAのランクのコントラスト比を保った結果なのかな？と思います。
”重い表現になる”と書いているので、おそらくAAAの基準で作ったのかなと思います。
• **AA（標準レベル）**：一般の人が快適に読めるレベル（4.5:1）
• **AAA（高レベル）**：視覚障害者や高齢者にもより読みやすいレベル（7:1）
基本的にはAAを目指すと、普通に読めるし、UIでふつうとしていろんなサービスが適用しているような、色の濃さになると思います。
またサイトの目的やユーザー像で判断して基準を考えていく必要もあると考えています。
例えば**AAで進めてもOKなケース**はこんな感じがあるかなと思います。
✅ 一般的なウェブサイトやアプリ
→ SNS、ブログ、ECサイト、企業サイト、SaaSなど、多くの人が利用するデジタルプロダクトならAA基準が一般的だと思います。
✅ ブランドの世界観やデザインのバランスを考慮したい場合
→ AA基準を守りつつ、デザイン性とのバランスを取りたいなら、AAAまで無理にこだわる必要はない。機能は担保されなくても”伝われば”良いという目的のため（ただ文字が読めないと伝わらないのなら文字は読める状態であるべき）
AAAで進めるべきケースは以下のような例があるかなと思います
⚠ 高齢者や視覚障害者向けのサービス
→ AAA基準を満たしていないと、ユーザーに視力的に読みにくくなる可能性が高いと思います。
⚠ **公的機関や教育・医療系のサービス**
→ 公共性が高いサービスは、アクセシビリティへの配慮が求められる。誰でも使えないといけない。
ECサイトでも高齢者が使うものであるなら、AAAを目指すことを考えた方がサイトの目的を達成できることもあるでしょう。
この辺りはユーザー層を考えて判断していく必要があります。
もし添付したようなサイトで毎回チェックしていて、Figmaで作業しているなら、Figmaのプラグインを使う方が確認が早いと思います。自分で検索して見つけてもいいですし、以下のようなプラグインを使ってみるのが良いかもです！
Stark - Contrast & Accessibility Checker
https://www.figma.com/community/plugin/732603254453395948/stark-contrast-accessibility-checker
※FigmaPlugin調べるときは、英語キーワードで調べると良かったりします。
質問はこちらのページのフォームから！
https://www.bo-no.design/question
コントラスト比をどこまで守るべきか
下記サイトで、いつもチェックしながら色を選ぶようにしています。https://webaim.org/resources/contrastchecker/
画面上では読める、理解できるものもコントラストチェッカーでアウトなら、絶対に使わないほうがいいのでしょうか。
全て従って作った際に、やや重い印象の仕上がりになったり、せっかくいい色なのになと残念に思うときがあります。
どこまで守るのがセオリーなのか知りたいです。
1. 絶対的なルールではないが、極端に微妙だと普通に使いづらい
2. AAAとAAがある
3. ユーザー層で判断
4. 読めないと意味がないもの、と、装飾
5. コントラストチェッカーはFigmaプラグインのほうが楽かも
コントラスト比は基準であり、絶対的なルールではないので必ずしも守らないといけないわけではありません。使うユーザー像や目的によると思います。後述する”AAA or AA" なのか、"ユーザーとその目的はなんなのか”、でどの基準まで守るべきかを考える必要があると思います。
じゃあ何も考えなくていいのか？というとそういうわけではなく、BONOでよく見る色使いの間違いとしては”オシャレさを意識して文字が読めない”し、結果として”オシャレでもない不安定な見た目になっている”ものがあります。これはそもそもの、普通に守ると見た目も機能性も良くなるよね、という基準を分からずに適用しているケース、つまり”ふつうパターンの欠如”です。
参考記事：基礎を身につけるために真似しよう
https://www.bo-no.design/contents/howtostudydesign-steal
なので、まずは世の中の”良いUI（特に海外で日本にもローカライズされていて、見た目が良いもの）”を真似してどういう色、どれぐらいのコントラスト比か？を知っていくと良い気がします。
おそらく”重い仕上がりになる”というのAAAのランクのコントラスト比を保った結果なのかな？と思います。
”重い表現になる”と書いているので、おそらくAAAの基準で作ったのかなと思います。
• **AA（標準レベル）**：一般の人が快適に読めるレベル（4.5:1）
• **AAA（高レベル）**：視覚障害者や高齢者にもより読みやすいレベル（7:1）
基本的にはAAを目指すと、普通に読めるし、UIでふつうとしていろんなサービスが適用しているような、色の濃さになると思います。
またサイトの目的やユーザー像で判断して基準を考えていく必要もあると考えています。
例えば**AAで進めてもOKなケース**はこんな感じがあるかなと思います。
✅ 一般的なウェブサイトやアプリ
→ SNS、ブログ、ECサイト、企業サイト、SaaSなど、多くの人が利用するデジタルプロダクトならAA基準が一般的だと思います。
✅ ブランドの世界観やデザインのバランスを考慮したい場合
→ AA基準を守りつつ、デザイン性とのバランスを取りたいなら、AAAまで無理にこだわる必要はない。機能は担保されなくても”伝われば”良いという目的のため（ただ文字が読めないと伝わらないのなら文字は読める状態であるべき）
AAAで進めるべきケースは以下のような例があるかなと思います
⚠ 高齢者や視覚障害者向けのサービス
→ AAA基準を満たしていないと、ユーザーに視力的に読みにくくなる可能性が高いと思います。
⚠ **公的機関や教育・医療系のサービス**
→ 公共性が高いサービスは、アクセシビリティへの配慮が求められる。誰でも使えないといけない。
ECサイトでも高齢者が使うものであるなら、AAAを目指すことを考えた方がサイトの目的を達成できることもあるでしょう。
この辺りはユーザー層を考えて判断していく必要があります。
もし添付したようなサイトで毎回チェックしていて、Figmaで作業しているなら、Figmaのプラグインを使う方が確認が早いと思います。自分で検索して見つけてもいいですし、以下のようなプラグインを使ってみるのが良いかもです！
Stark - Contrast & Accessibility Checker
https://www.figma.com/community/plugin/732603254453395948/stark-contrast-accessibility-checker
※FigmaPlugin調べるときは、英語キーワードで調べると良かったりします。
質問はこちらのページのフォームから！
https://www.bo-no.design/question
0 Comments