Enviar pesquisa
Carregar
コントラスト高めでいこう
•
1 gostou
•
2,961 visualizações
Nozomi Sawada
Seguir
2019/03/04(月)に岡山大インキュベータにて行われた「リーダブルな夜 on 2019/03/04」でのスライドです。
Leia menos
Leia mais
Design
Vista de apresentação de diapositivos
Denunciar
Compartilhar
Vista de apresentação de diapositivos
Denunciar
Compartilhar
1 de 81
Baixar agora
Baixar para ler offline
Recomendados
代替テキストの基本から応用まで
代替テキストの基本から応用まで
Nozomi Sawada
WAI-ARIAの考え方と使い方を整理しよう
WAI-ARIAの考え方と使い方を整理しよう
Nozomi Sawada
「UXデザインと組織論」に、正面から向きあってみた:2016年2月27日 『人間中心デザイン』HCD導入設計論
「UXデザインと組織論」に、正面から向きあってみた:2016年2月27日 『人間中心デザイン』HCD導入設計論
Yoshiki Hayama
ユーザーインタビューからその後どうするの? 発話録からKA法(本質的価値抽出法)でインサイトを見つけよう!
ユーザーインタビューからその後どうするの? 発話録からKA法(本質的価値抽出法)でインサイトを見つけよう!
Yoshiki Hayama
ワークショップのアイデア発想で「AIでユーザーに最適な情報を出します」とか言うな
ワークショップのアイデア発想で「AIでユーザーに最適な情報を出します」とか言うな
Yoshiki Hayama
ユーザー調査・分析に基づいた、“刺さる” WEBサービス・プロダクトデザイン
ユーザー調査・分析に基づいた、“刺さる” WEBサービス・プロダクトデザイン
Yoshiki Hayama
こうすればできる!ウェブアクセシビリティ実装のポイントと実装チェックリストの作り方
こうすればできる!ウェブアクセシビリティ実装のポイントと実装チェックリストの作り方
Web Accessibility Infrastructure Committee (WAIC)
UXデザインのはじめの一歩を体験しよう! ユーザーインタビューの基本 [第2版] | UXデザイン実践セミナー 第2回
UXデザインのはじめの一歩を体験しよう! ユーザーインタビューの基本 [第2版] | UXデザイン実践セミナー 第2回
Yoshiki Hayama
Recomendados
代替テキストの基本から応用まで
代替テキストの基本から応用まで
Nozomi Sawada
WAI-ARIAの考え方と使い方を整理しよう
WAI-ARIAの考え方と使い方を整理しよう
Nozomi Sawada
「UXデザインと組織論」に、正面から向きあってみた:2016年2月27日 『人間中心デザイン』HCD導入設計論
「UXデザインと組織論」に、正面から向きあってみた:2016年2月27日 『人間中心デザイン』HCD導入設計論
Yoshiki Hayama
ユーザーインタビューからその後どうするの? 発話録からKA法(本質的価値抽出法)でインサイトを見つけよう!
ユーザーインタビューからその後どうするの? 発話録からKA法(本質的価値抽出法)でインサイトを見つけよう!
Yoshiki Hayama
ワークショップのアイデア発想で「AIでユーザーに最適な情報を出します」とか言うな
ワークショップのアイデア発想で「AIでユーザーに最適な情報を出します」とか言うな
Yoshiki Hayama
ユーザー調査・分析に基づいた、“刺さる” WEBサービス・プロダクトデザイン
ユーザー調査・分析に基づいた、“刺さる” WEBサービス・プロダクトデザイン
Yoshiki Hayama
こうすればできる!ウェブアクセシビリティ実装のポイントと実装チェックリストの作り方
こうすればできる!ウェブアクセシビリティ実装のポイントと実装チェックリストの作り方
Web Accessibility Infrastructure Committee (WAIC)
UXデザインのはじめの一歩を体験しよう! ユーザーインタビューの基本 [第2版] | UXデザイン実践セミナー 第2回
UXデザインのはじめの一歩を体験しよう! ユーザーインタビューの基本 [第2版] | UXデザイン実践セミナー 第2回
Yoshiki Hayama
Unityとシェーダで描く360度フラクタル
Unityとシェーダで描く360度フラクタル
Hirotaka Nakayama
WCAG 2.2で追加される達成基準
WCAG 2.2で追加される達成基準
Mitsue-Links Co.,Ltd. Accessibility Department
UXデザイナーになりたい僕らのサバイバル生存戦略 〜UXデザイン・UXリサーチはどうやって学べばいいの?〜 | UX BOOST!! Vol.1
UXデザイナーになりたい僕らのサバイバル生存戦略 〜UXデザイン・UXリサーチはどうやって学べばいいの?〜 | UX BOOST!! Vol.1
Yoshiki Hayama
プロが生実演! 「ユーザーインタビュー」の深掘りテクニックを大公開!
プロが生実演! 「ユーザーインタビュー」の深掘りテクニックを大公開!
Yoshiki Hayama
「顧客視点」実務UXセミナー
「顧客視点」実務UXセミナー
Tomoyo Watanabe
UXデザインに学ぶ、ターゲット心理の分析テクニック:2014年6月21日 リンクシェア フェア 2014
UXデザインに学ぶ、ターゲット心理の分析テクニック:2014年6月21日 リンクシェア フェア 2014
Yoshiki Hayama
ChatGPTでモノづくりを支援してもらった話(移行済)
ChatGPTでモノづくりを支援してもらった話(移行済)
tomitomi3 tomitomi3
ユーザーエクスペリエンスは計測可能なのか? 〜UX計測に関する論文レビュー
ユーザーエクスペリエンスは計測可能なのか? 〜UX計測に関する論文レビュー
Masaya Ando
お客様の目を覚ませ! ついでに自分の目も覚ませ! デザイン思考のクライアントワークのプレセールス
お客様の目を覚ませ! ついでに自分の目も覚ませ! デザイン思考のクライアントワークのプレセールス
Yoshiki Hayama
なぜあの人のプレゼンテーションはいつもイイねと言われるのか0716
なぜあの人のプレゼンテーションはいつもイイねと言われるのか0716
Dai Murata
【Unite Tokyo 2019】トヨタのxR活用事例ご紹介
【Unite Tokyo 2019】トヨタのxR活用事例ご紹介
UnityTechnologiesJapan002
UXデザインのはじめの一歩を体験しよう! ユーザーインタビューの基本 | UXデザイン実践セミナー 第1回
UXデザインのはじめの一歩を体験しよう! ユーザーインタビューの基本 | UXデザイン実践セミナー 第1回
Yoshiki Hayama
UXデザイン概論 2019
UXデザイン概論 2019
Masaya Ando
文献紹介:VideoCLIP: Contrastive Pre-training for Zero-shot Video-Text Understanding
文献紹介:VideoCLIP: Contrastive Pre-training for Zero-shot Video-Text Understanding
Toru Tamaki
そして僕は粛々とサービスデザインをするだけ
そして僕は粛々とサービスデザインをするだけ
Yoshiki Hayama
「ユーザーを理解するって言うほどカンタンじゃないよね」 UXデザイン・UXリサーチをもう一度ちゃんと理解しよう!
「ユーザーを理解するって言うほどカンタンじゃないよね」 UXデザイン・UXリサーチをもう一度ちゃんと理解しよう!
Yoshiki Hayama
人は一ヶ月でエンジニアになれるのか - 詳細解説
人は一ヶ月でエンジニアになれるのか - 詳細解説
Livesense Inc.
サービスにおけるビジュアルデザインの役割
サービスにおけるビジュアルデザインの役割
Kenichi Suzuki
使う人の体験を時間軸で考えよう〜UXデザインの視点を取り入れる
使う人の体験を時間軸で考えよう〜UXデザインの視点を取り入れる
Masaya Ando
分かりやすく、使いやすいデザインを生み出す工夫 先生:池田 拓司
分かりやすく、使いやすいデザインを生み出す工夫 先生:池田 拓司
schoowebcampus
中小企業のWebサイトでも気にしておきたいアクセシビリティ
中小企業のWebサイトでも気にしておきたいアクセシビリティ
Nozomi Sawada
「誰」が「何」をする?みんなで考えてみよう!
「誰」が「何」をする?みんなで考えてみよう!
Nozomi Sawada
Mais conteúdo relacionado
Mais procurados
Unityとシェーダで描く360度フラクタル
Unityとシェーダで描く360度フラクタル
Hirotaka Nakayama
WCAG 2.2で追加される達成基準
WCAG 2.2で追加される達成基準
Mitsue-Links Co.,Ltd. Accessibility Department
UXデザイナーになりたい僕らのサバイバル生存戦略 〜UXデザイン・UXリサーチはどうやって学べばいいの?〜 | UX BOOST!! Vol.1
UXデザイナーになりたい僕らのサバイバル生存戦略 〜UXデザイン・UXリサーチはどうやって学べばいいの?〜 | UX BOOST!! Vol.1
Yoshiki Hayama
プロが生実演! 「ユーザーインタビュー」の深掘りテクニックを大公開!
プロが生実演! 「ユーザーインタビュー」の深掘りテクニックを大公開!
Yoshiki Hayama
「顧客視点」実務UXセミナー
「顧客視点」実務UXセミナー
Tomoyo Watanabe
UXデザインに学ぶ、ターゲット心理の分析テクニック:2014年6月21日 リンクシェア フェア 2014
UXデザインに学ぶ、ターゲット心理の分析テクニック:2014年6月21日 リンクシェア フェア 2014
Yoshiki Hayama
ChatGPTでモノづくりを支援してもらった話(移行済)
ChatGPTでモノづくりを支援してもらった話(移行済)
tomitomi3 tomitomi3
ユーザーエクスペリエンスは計測可能なのか? 〜UX計測に関する論文レビュー
ユーザーエクスペリエンスは計測可能なのか? 〜UX計測に関する論文レビュー
Masaya Ando
お客様の目を覚ませ! ついでに自分の目も覚ませ! デザイン思考のクライアントワークのプレセールス
お客様の目を覚ませ! ついでに自分の目も覚ませ! デザイン思考のクライアントワークのプレセールス
Yoshiki Hayama
なぜあの人のプレゼンテーションはいつもイイねと言われるのか0716
なぜあの人のプレゼンテーションはいつもイイねと言われるのか0716
Dai Murata
【Unite Tokyo 2019】トヨタのxR活用事例ご紹介
【Unite Tokyo 2019】トヨタのxR活用事例ご紹介
UnityTechnologiesJapan002
UXデザインのはじめの一歩を体験しよう! ユーザーインタビューの基本 | UXデザイン実践セミナー 第1回
UXデザインのはじめの一歩を体験しよう! ユーザーインタビューの基本 | UXデザイン実践セミナー 第1回
Yoshiki Hayama
UXデザイン概論 2019
UXデザイン概論 2019
Masaya Ando
文献紹介:VideoCLIP: Contrastive Pre-training for Zero-shot Video-Text Understanding
文献紹介:VideoCLIP: Contrastive Pre-training for Zero-shot Video-Text Understanding
Toru Tamaki
そして僕は粛々とサービスデザインをするだけ
そして僕は粛々とサービスデザインをするだけ
Yoshiki Hayama
「ユーザーを理解するって言うほどカンタンじゃないよね」 UXデザイン・UXリサーチをもう一度ちゃんと理解しよう!
「ユーザーを理解するって言うほどカンタンじゃないよね」 UXデザイン・UXリサーチをもう一度ちゃんと理解しよう!
Yoshiki Hayama
人は一ヶ月でエンジニアになれるのか - 詳細解説
人は一ヶ月でエンジニアになれるのか - 詳細解説
Livesense Inc.
サービスにおけるビジュアルデザインの役割
サービスにおけるビジュアルデザインの役割
Kenichi Suzuki
使う人の体験を時間軸で考えよう〜UXデザインの視点を取り入れる
使う人の体験を時間軸で考えよう〜UXデザインの視点を取り入れる
Masaya Ando
分かりやすく、使いやすいデザインを生み出す工夫 先生:池田 拓司
分かりやすく、使いやすいデザインを生み出す工夫 先生:池田 拓司
schoowebcampus
Mais procurados
(20)
Unityとシェーダで描く360度フラクタル
Unityとシェーダで描く360度フラクタル
WCAG 2.2で追加される達成基準
WCAG 2.2で追加される達成基準
UXデザイナーになりたい僕らのサバイバル生存戦略 〜UXデザイン・UXリサーチはどうやって学べばいいの?〜 | UX BOOST!! Vol.1
UXデザイナーになりたい僕らのサバイバル生存戦略 〜UXデザイン・UXリサーチはどうやって学べばいいの?〜 | UX BOOST!! Vol.1
プロが生実演! 「ユーザーインタビュー」の深掘りテクニックを大公開!
プロが生実演! 「ユーザーインタビュー」の深掘りテクニックを大公開!
「顧客視点」実務UXセミナー
「顧客視点」実務UXセミナー
UXデザインに学ぶ、ターゲット心理の分析テクニック:2014年6月21日 リンクシェア フェア 2014
UXデザインに学ぶ、ターゲット心理の分析テクニック:2014年6月21日 リンクシェア フェア 2014
ChatGPTでモノづくりを支援してもらった話(移行済)
ChatGPTでモノづくりを支援してもらった話(移行済)
ユーザーエクスペリエンスは計測可能なのか? 〜UX計測に関する論文レビュー
ユーザーエクスペリエンスは計測可能なのか? 〜UX計測に関する論文レビュー
お客様の目を覚ませ! ついでに自分の目も覚ませ! デザイン思考のクライアントワークのプレセールス
お客様の目を覚ませ! ついでに自分の目も覚ませ! デザイン思考のクライアントワークのプレセールス
なぜあの人のプレゼンテーションはいつもイイねと言われるのか0716
なぜあの人のプレゼンテーションはいつもイイねと言われるのか0716
【Unite Tokyo 2019】トヨタのxR活用事例ご紹介
【Unite Tokyo 2019】トヨタのxR活用事例ご紹介
UXデザインのはじめの一歩を体験しよう! ユーザーインタビューの基本 | UXデザイン実践セミナー 第1回
UXデザインのはじめの一歩を体験しよう! ユーザーインタビューの基本 | UXデザイン実践セミナー 第1回
UXデザイン概論 2019
UXデザイン概論 2019
文献紹介:VideoCLIP: Contrastive Pre-training for Zero-shot Video-Text Understanding
文献紹介:VideoCLIP: Contrastive Pre-training for Zero-shot Video-Text Understanding
そして僕は粛々とサービスデザインをするだけ
そして僕は粛々とサービスデザインをするだけ
「ユーザーを理解するって言うほどカンタンじゃないよね」 UXデザイン・UXリサーチをもう一度ちゃんと理解しよう!
「ユーザーを理解するって言うほどカンタンじゃないよね」 UXデザイン・UXリサーチをもう一度ちゃんと理解しよう!
人は一ヶ月でエンジニアになれるのか - 詳細解説
人は一ヶ月でエンジニアになれるのか - 詳細解説
サービスにおけるビジュアルデザインの役割
サービスにおけるビジュアルデザインの役割
使う人の体験を時間軸で考えよう〜UXデザインの視点を取り入れる
使う人の体験を時間軸で考えよう〜UXデザインの視点を取り入れる
分かりやすく、使いやすいデザインを生み出す工夫 先生:池田 拓司
分かりやすく、使いやすいデザインを生み出す工夫 先生:池田 拓司
Mais de Nozomi Sawada
中小企業のWebサイトでも気にしておきたいアクセシビリティ
中小企業のWebサイトでも気にしておきたいアクセシビリティ
Nozomi Sawada
「誰」が「何」をする?みんなで考えてみよう!
「誰」が「何」をする?みんなで考えてみよう!
Nozomi Sawada
UDトークで会話をアクセシブルにしてみよう
UDトークで会話をアクセシブルにしてみよう
Nozomi Sawada
色にまつわるエトセトラ(いろいろ)
色にまつわるエトセトラ(いろいろ)
Nozomi Sawada
岡山をリーダブルな世界に
岡山をリーダブルな世界に
Nozomi Sawada
こんなとき実感!代替テキストと字幕の大切さ
こんなとき実感!代替テキストと字幕の大切さ
Nozomi Sawada
Webアクセシビリティ 今ならどうするの?
Webアクセシビリティ 今ならどうするの?
Nozomi Sawada
第7回 okayama-js 実践 WAI-ARIA
第7回 okayama-js 実践 WAI-ARIA
Nozomi Sawada
より多くの人へ届けるために Webコンテンツで 「ちょっと」気をつけたいこと
より多くの人へ届けるために Webコンテンツで 「ちょっと」気をつけたいこと
Nozomi Sawada
WAI-ARIAの正しい使い方 〜あるある?ケーススタディ〜
WAI-ARIAの正しい使い方 〜あるある?ケーススタディ〜
Nozomi Sawada
JIS X 8341-3:2010から2016への変更点おさらい/Webアクセシビリティチェックのポイント
JIS X 8341-3:2010から2016への変更点おさらい/Webアクセシビリティチェックのポイント
Nozomi Sawada
オマケ会 D2Dアクセシビリティ勉強会資料「アクセシブルなCSSをつくろう」
オマケ会 D2Dアクセシビリティ勉強会資料「アクセシブルなCSSをつくろう」
Nozomi Sawada
第7回 D2D アクセシビリティ勉強会資料「D2Dサイトをアクセシブルにマークアップ」
第7回 D2D アクセシビリティ勉強会資料「D2Dサイトをアクセシブルにマークアップ」
Nozomi Sawada
第6回 D2D アクセシビリティ勉強会資料「アクセシブルな入力フォームを作ろう」
第6回 D2D アクセシビリティ勉強会資料「アクセシブルな入力フォームを作ろう」
Nozomi Sawada
岡山で アクセシビリティ はじめよーでー
岡山で アクセシビリティ はじめよーでー
Nozomi Sawada
第5回 D2D アクセシビリティ勉強会資料「アクセシブルなワイヤーフレーム設計〜ビジュアルデザイン」
第5回 D2D アクセシビリティ勉強会資料「アクセシブルなワイヤーフレーム設計〜ビジュアルデザイン」
Nozomi Sawada
第2回 D2D アクセシビリティ勉強会「JIS X 8341-3:2010 を一人で読めるようになろう」
第2回 D2D アクセシビリティ勉強会「JIS X 8341-3:2010 を一人で読めるようになろう」
Nozomi Sawada
Mais de Nozomi Sawada
(17)
中小企業のWebサイトでも気にしておきたいアクセシビリティ
中小企業のWebサイトでも気にしておきたいアクセシビリティ
「誰」が「何」をする?みんなで考えてみよう!
「誰」が「何」をする?みんなで考えてみよう!
UDトークで会話をアクセシブルにしてみよう
UDトークで会話をアクセシブルにしてみよう
色にまつわるエトセトラ(いろいろ)
色にまつわるエトセトラ(いろいろ)
岡山をリーダブルな世界に
岡山をリーダブルな世界に
こんなとき実感!代替テキストと字幕の大切さ
こんなとき実感!代替テキストと字幕の大切さ
Webアクセシビリティ 今ならどうするの?
Webアクセシビリティ 今ならどうするの?
第7回 okayama-js 実践 WAI-ARIA
第7回 okayama-js 実践 WAI-ARIA
より多くの人へ届けるために Webコンテンツで 「ちょっと」気をつけたいこと
より多くの人へ届けるために Webコンテンツで 「ちょっと」気をつけたいこと
WAI-ARIAの正しい使い方 〜あるある?ケーススタディ〜
WAI-ARIAの正しい使い方 〜あるある?ケーススタディ〜
JIS X 8341-3:2010から2016への変更点おさらい/Webアクセシビリティチェックのポイント
JIS X 8341-3:2010から2016への変更点おさらい/Webアクセシビリティチェックのポイント
オマケ会 D2Dアクセシビリティ勉強会資料「アクセシブルなCSSをつくろう」
オマケ会 D2Dアクセシビリティ勉強会資料「アクセシブルなCSSをつくろう」
第7回 D2D アクセシビリティ勉強会資料「D2Dサイトをアクセシブルにマークアップ」
第7回 D2D アクセシビリティ勉強会資料「D2Dサイトをアクセシブルにマークアップ」
第6回 D2D アクセシビリティ勉強会資料「アクセシブルな入力フォームを作ろう」
第6回 D2D アクセシビリティ勉強会資料「アクセシブルな入力フォームを作ろう」
岡山で アクセシビリティ はじめよーでー
岡山で アクセシビリティ はじめよーでー
第5回 D2D アクセシビリティ勉強会資料「アクセシブルなワイヤーフレーム設計〜ビジュアルデザイン」
第5回 D2D アクセシビリティ勉強会資料「アクセシブルなワイヤーフレーム設計〜ビジュアルデザイン」
第2回 D2D アクセシビリティ勉強会「JIS X 8341-3:2010 を一人で読めるようになろう」
第2回 D2D アクセシビリティ勉強会「JIS X 8341-3:2010 を一人で読めるようになろう」
コントラスト高めでいこう
1.
コントラスト高めでいこう
2.
自己紹介 2
3.
3 澤田 望 パーマ メガネ (老眼) ガリガリ 中年講師
4.
4 岡山で独立(2014~) Webアクセシビリティ検証/ イラスト制作/ 岡山情報ビジネス学院 非常勤講師 などなど キヤノン (~2013) サイトデザイン監修/ Webアクセシビリティ対応 WAIC
(2011~) (ウェブアクセシビリティ基盤委員会) コラムを担当
5.
本日の目標 5
6.
・コントラストの基準とは? ・コントラスト比はどうやって測るのか? ・コントラストを高める方法とは? 6
7.
コントラストの基準 7
8.
9.
10.
文字色と背景色に差がないと読みにくいですね?
11.
プロジェクターだと、さらに読みにくいかも... 11
12.
12 炎天下でスマホの画面が見えづらい状況
13.
読めなきゃ使えない。 13
14.
Webサイトやアプリに限らず、 UIデザインをする際の基本中の基本。 14
15.
15https://waic.jp/docs/UNDERSTANDING-WCAG20/visual-audio-contrast-contrast.html より
16.
16https://waic.jp/docs/WCAG20/Overview.html#larger-scaledef より
17.
言語 テキストサイズ (文字画像含む) 太さ 背景色とのコントラスト比 (最低限) 日本語 大 29 px 以上
細 3.0:1 24 px 以上 太 小 29 px 未満 細 4.5:1 24 px 未満 太 英数 大 24 px 以上 細 3.0:1 18.5 px 以上 太 小 24 px 未満 細 4.5:1 18.5 px 未満 太 17 テキスト色のコントラストの基準 WCAG 2.0 レベル AA • 3.0:1 標準的な視力における最低限のレベル [ISO-9241-3] 及び [ANSI-HFES-100-1988] 推奨 • 4.5:1 視力低下/色覚異常/老眼を考慮したレベル https://waic.jp/docs/UNDERSTANDING-WCAG20/visual-audio-contrast-contrast.html より
18.
コントラスト比の計算 18
19.
19https://waic.jp/docs/WCAG20/Overview.html#contrast-ratiodef より
20.
20 色相は、色覚異常のある利用者による知覚のされ方の差が大きい 輝度を基にしたコントラスト比 https://waic.jp/docs/UNDERSTANDING-WCAG20/visual-audio-contrast-contrast.html より
21.
21https://waic.jp/docs/WCAG20/Overview.html#relativeluminancedef より
22.
自分で計算しなくてもツールがたくさんあります。 22
23.
23https://developer.paciellogroup.com/resources/contrastanalyser/ より
24.
24https://usecontrast.com/ より
25.
25Firefox のアクセシビリティインスペクター(通常は無効な状態)
26.
26Google Chrome のデベロッパーツール内カラーピッカー
27.
27http://www.getstark.co/ より
28.
28https://www.adobeexchange.com/creativecloud.details.12170.check-contrast-ratio.html より
29.
29http://jxnblk.com/colorable/demos/matrix/ より
30.
まぁ、いろいろあります。 30
31.
ツール選びのポイント 31
32.
1. カラーピッカーが正確なこと 32
33.
2. 数字を丸めすぎないこと (WCAG/JIS 対応する場合は特に) 33
34.
34 4.5:1 ありますけど? コントラスト足りないから高くしてもらる? 3. チーム/クライアントと同じツールが使えること
35.
コントラスト比を実感しよう 35
36.
4.5:1って、どのくらい? 36
37.
背景色 テキスト色 コントラスト比
テキスト色 コントラスト比 #000000 #000000 #FFFFFF #111111 #000000 #FFFFFF #222222 #000000 #FFFFFF #333333 #000000 #FFFFFF #444444 #000000 #FFFFFF #555555 #000000 #FFFFFF #666666 #000000 #FFFFFF #777777 #000000 #FFFFFF #888888 #000000 #FFFFFF #999999 #000000 #FFFFFF #AAAAAA #000000 #FFFFFF #BBBBBB #000000 #FFFFFF #CCCCCC #000000 #FFFFFF #DDDDDD #000000 #FFFFFF #EEEEEE #000000 #FFFFFF #FFFFFF #000000 #FFFFFF 37
38.
背景色 テキスト色 コントラスト比
テキスト色 コントラスト比 #000000 #000000 1.00:1 #FFFFFF 21.00:1 #111111 #000000 1.11:1 #FFFFFF 18.88:1 #222222 #000000 1.32:1 #FFFFFF 15.91:1 #333333 #000000 1.66:1 #FFFFFF 12.63:1 #444444 #000000 2.16:1 #FFFFFF 9.74:1 #555555 #000000 2.82:1 #FFFFFF 7.46:1 #666666 #000000 3.66:1 #FFFFFF 5.74:1 #777777 #000000 4.69:1 #FFFFFF 4.48:1 #888888 #000000 5.92:1 #FFFFFF 3.54:1 #999999 #000000 7.37:1 #FFFFFF 2.85:1 #AAAAAA #000000 9.04:1 #FFFFFF 2.32:1 #BBBBBB #000000 10.94:1 #FFFFFF 1.92:1 #CCCCCC #000000 13.08:1 #FFFFFF 1.61:1 #DDDDDD #000000 15.46:1 #FFFFFF 1.36:1 #EEEEEE #000000 18.10:1 #FFFFFF 1.16:1 #FFFFFF #000000 21.00:1 #FFFFFF 1.00:1 38
39.
背景色 テキスト色 コントラスト比
テキスト色 コントラスト比 #000000 #000000 #FFFFFF #110000 #000000 #FFFFFF #220000 #000000 #FFFFFF #330000 #000000 #FFFFFF #440000 #000000 #FFFFFF #550000 #000000 #FFFFFF #660000 #000000 #FFFFFF #770000 #000000 #FFFFFF #880000 #000000 #FFFFFF #990000 #000000 #FFFFFF #AA0000 #000000 #FFFFFF #BB0000 #000000 #FFFFFF #CC0000 #000000 #FFFFFF #DD0000 #000000 #FFFFFF #EE0000 #000000 #FFFFFF #FF0000 #000000 #FFFFFF 39
40.
背景色 テキスト色 コントラスト比
テキスト色 コントラスト比 #000000 #000000 1.00:1 #FFFFFF 21.00:1 #110000 #000000 1.02:1 #FFFFFF 20.51:1 #220000 #000000 1.07:1 #FFFFFF 19.66:1 #330000 #000000 1.14:1 #FFFFFF 18.41:1 #440000 #000000 1.25:1 #FFFFFF 16.86:1 #550000 #000000 1.39:1 #FFFFFF 15.15:1 #660000 #000000 1.56:1 #FFFFFF 13.42:1 #770000 #000000 1.78:1 #FFFFFF 11.77:1 #880000 #000000 2.05:1 #FFFFFF 10.26:1 #990000 #000000 2.35:1 #FFFFFF 8.92:1 #AA0000 #000000 2.71:1 #FFFFFF 7.75:1 #BB0000 #000000 3.11:1 #FFFFFF 6.75:1 #CC0000 #000000 3.57:1 #FFFFFF 5.89:1 #DD0000 #000000 4.07:1 #FFFFFF 5.15:1 #EE0000 #000000 4.64:1 #FFFFFF 4.53:1 #FF0000 #000000 5.25:1 #FFFFFF 4.00:1 40
41.
背景色 テキスト色 コントラスト比
テキスト色 コントラスト比 #FF0000 #000000 5.25:1 #FFFFFF 4.00:1 #FF1100 #000000 5.33:1 #FFFFFF 3.94:1 #FF2200 #000000 5.48:1 #FFFFFF 3.83:1 #FF3300 #000000 5.73:1 #FFFFFF 3.67:1 #FF4400 #000000 6.08:1 #FFFFFF 3.45:1 #FF5500 #000000 6.55:1 #FFFFFF 3.21:1 #FF6600 #000000 7.15:1 #FFFFFF 2.94:1 #FF7700 #000000 7.89:1 #FFFFFF 2.66:1 #FF8800 #000000 8.77:1 #FFFFFF 2.39:1 #FF9900 #000000 9.81:1 #FFFFFF 2.14:1 #FFAA00 #000000 11.00:1 #FFFFFF 1.91:1 #FFBB00 #000000 12.36:1 #FFFFFF 1.70:1 #FFCC00 #000000 13.89:1 #FFFFFF 1.51:1 #FFDD00 #000000 15.59:1 #FFFFFF 1.35:1 #FFEE00 #000000 17.48:1 #FFFFFF 1.20:1 #FFFF00 #000000 19.56:1 #FFFFFF 1.07:1 41
42.
背景色 テキスト色 コントラスト比
テキスト色 コントラスト比 #000000 #000000 1.00:1 #FFFFFF 21.00:1 #001100 #000000 1.08:1 #FFFFFF 19.44:1 #002200 #000000 1.23:1 #FFFFFF 17.09:1 #003300 #000000 1.47:1 #FFFFFF 14.25:1 #004400 #000000 1.83:1 #FFFFFF 11.50:1 #005500 #000000 2.30:1 #FFFFFF 9.13:1 #006600 #000000 2.90:1 #FFFFFF 7.24:1 #007700 #000000 3.64:1 #FFFFFF 5.77:1 #008800 #000000 4.52:1 #FFFFFF 4.64:1 #009900 #000000 5.56:1 #FFFFFF 3.78:1 #00AA00 #000000 6.75:1 #FFFFFF 3.11:1 #00BB00 #000000 8.11:1 #FFFFFF 2.59:1 #00CC00 #000000 9.64:1 #FFFFFF 2.18:1 #00DD00 #000000 11.34:1 #FFFFFF 1.85:1 #00EE00 #000000 13.23:1 #FFFFFF 1.59:1 #00FF00 #000000 15.30:1 #FFFFFF 1.37:1 42
43.
背景色 テキスト色 コントラスト比
テキスト色 コントラスト比 #00FF00 #000000 15.30:1 #FFFFFF 1.37:1 #11FF00 #000000 15.33:1 #FFFFFF 1.37:1 #22FF00 #000000 15.37:1 #FFFFFF 1.37:1 #33FF00 #000000 15.44:1 #FFFFFF 1.36:1 #44FF00 #000000 15.55:1 #FFFFFF 1.35:1 #55FF00 #000000 15.69:1 #FFFFFF 1.34:1 #66FF00 #000000 15.87:1 #FFFFFF 1.32:1 #77FF00 #000000 16.09:1 #FFFFFF 1.31:1 #88FF00 #000000 16.35:1 #FFFFFF 1.28:1 #99FF00 #000000 16.66:1 #FFFFFF 1.26:1 #AAFF00 #000000 17.01:1 #FFFFFF 1.23:1 #BBFF00 #000000 17.42:1 #FFFFFF 1.21:1 #CCFF00 #000000 17.87:1 #FFFFFF 1.18:1 #DDFF00 #000000 18.38:1 #FFFFFF 1.14:1 #EEFF00 #000000 18.94:1 #FFFFFF 1.11:1 #FFFF00 #000000 19.56:1 #FFFFFF 1.07:1 43
44.
背景色 テキスト色 コントラスト比
テキスト色 コントラスト比 #000000 #000000 1.00:1 #FFFFFF 21.00:1 #000011 #000000 1.01:1 #FFFFFF 20.83:1 #000022 #000000 1.02:1 #FFFFFF 20.53:1 #000033 #000000 1.05:1 #FFFFFF 20.04:1 #000044 #000000 1.08:1 #FFFFFF 19.38:1 #000055 #000000 1.13:1 #FFFFFF 18.56:1 #000066 #000000 1.19:1 #FFFFFF 17.62:1 #000077 #000000 1.27:1 #FFFFFF 16.58:1 #000088 #000000 1.36:1 #FFFFFF 15.49:1 #000099 #000000 1.46:1 #FFFFFF 14.38:1 #0000AA #000000 1.58:1 #FFFFFF 13.29:1 #0000BB #000000 1.72:1 #FFFFFF 12.23:1 #0000CC #000000 1.87:1 #FFFFFF 11.22:1 #0000DD #000000 2.04:1 #FFFFFF 10.27:1 #0000EE #000000 2.23:1 #FFFFFF 9.40:1 #0000FF #000000 2.44:1 #FFFFFF 8.59:1 44
45.
背景色 テキスト色 コントラスト比
テキスト色 コントラスト比 #0000FF #000000 2.44:1 #FFFFFF 8.59:1 #0011FF #000000 2.52:1 #FFFFFF 8.32:1 #0022FF #000000 2.67:1 #FFFFFF 7.86:1 #0033FF #000000 2.92:1 #FFFFFF 7.20:1 #0044FF #000000 3.27:1 #FFFFFF 6.42:1 #0055FF #000000 3.74:1 #FFFFFF 5.61:1 #0066FF #000000 4.34:1 #FFFFFF 4.83:1 #0077FF #000000 5.08:1 #FFFFFF 4.13:1 #0088FF #000000 5.97:1 #FFFFFF 3.52:1 #0099FF #000000 7.00:1 #FFFFFF 3.00:1 #00AAFF #000000 8.19:1 #FFFFFF 2.56:1 #00BBFF #000000 9.55:1 #FFFFFF 2.20:1 #00CCFF #000000 11.08:1 #FFFFFF 1.90:1 #00DDFF #000000 12.79:1 #FFFFFF 1.64:1 #00EEFF #000000 14.67:1 #FFFFFF 1.43:1 #00FFFF #000000 16.75:1 #FFFFFF 1.25:1 45
46.
コントラスト比は、 46
47.
4.5:1 ! 47
48.
今後は文字以外にも適用されます。 48
49.
49https://waic.github.io/wcag21/guidelines/ より
50.
50https://waic.github.io/wcag21/guidelines/#non-text-contrast より 入力フォーム/ボタンなど アイコン/グラフ/図など
51.
コントラスト比を測ってみよう 51
52.
52 bit.ly/readable_CCAe Colour Contrast Analyser
をインストール事前準備
53.
53 コントラスト比 → レベル AA 判定結果 → 前景(テキスト)色 → 背景色 → Colour
Contrast Analyser
54.
自分が関わったページを調べてみよう! 54
55.
関わったページがない人は、こちら → 55
56.
56http://www.pref.okayama.jp/ より
57.
アンチエイリアスのかかった文字画像は注意 57 見えなくても字体(文字の骨格となる形) に影響がない部分 アンチエイリアスで薄くなった部分は測定不要 見えないと字体(文字の骨格となる形) に影響がある部分 アンチエイリアスで薄くなっても測定必要 http://www.pref.okayama.jp/ より
58.
hover/focus時も忘れずに 58 利用者が最も注目しているタイミング 何を選んだのか読める必要がある http://www.pref.okayama.jp/ より
59.
コントラストを高めてみよう 59
60.
• スライド各ページに書かれている 見えにくいキャッチコピーをはっきり見えるようにする • コントラスト比を測定し、測定値を記入 •
前景色と背景色のコントラスト比が 4.5:1以上になるように工夫する • どんな手段を使ってもOK • できる限り多くの方法でコントラストを高められた人が勝ち! (勝ち負け関係ない) • 制限時間:25分 60 作業内容
61.
2. 開く 1. Googleにログインしbit.ly/readable_0304を開く 61 準備 4.
自分の名前を入力 3. コピーを作成
62.
62 5. 自分の名前の付いたファイルが出来ていることを確認
63.
63 各自で工夫して、コントラスト比を高めよう! 塗りつぶしの色 枠線の色 その他の効果
64.
コントラストの高め方いろいろ 64
65.
65
66.
おまけ 66
67.
背景色 テキスト色 コントラスト比
テキスト色 コントラスト比 #FF0000 #000000 5.25:1 #FFFFFF 4.00:1 #FF1100 #000000 5.33:1 #FFFFFF 3.94:1 #FF2200 #000000 5.48:1 #FFFFFF 3.83:1 #FF3300 #000000 5.73:1 #FFFFFF 3.67:1 #FF4400 #000000 6.08:1 #FFFFFF 3.45:1 #FF5500 #000000 6.55:1 #FFFFFF 3.21:1 #FF6600 #000000 7.15:1 #FFFFFF 2.94:1 #FF7700 #000000 7.89:1 #FFFFFF 2.66:1 #FF8800 #000000 8.77:1 #FFFFFF 2.39:1 #FF9900 #000000 9.81:1 #FFFFFF 2.14:1 #FFAA00 #000000 11.00:1 #FFFFFF 1.91:1 #FFBB00 #000000 12.36:1 #FFFFFF 1.70:1 #FFCC00 #000000 13.89:1 #FFFFFF 1.51:1 #FFDD00 #000000 15.59:1 #FFFFFF 1.35:1 #FFEE00 #000000 17.48:1 #FFFFFF 1.20:1 #FFFF00 #000000 19.56:1 #FFFFFF 1.07:1 67
68.
白は膨張色なので大きく/太く見える。 黒は収縮色なので小さく/細く見える。 68
69.
ここから仮説です。 69
70.
#FF3300 #FF3300 5.73:1 3.67:1 70
71.
#FFAA00 #FFAA00 11.00:1 1.91:1 71
72.
#FFDD00 #FFDD00 15.59:1 1.35:1 72
73.
73 Excelでコントラスト比計算やってみた
74.
#FF3300 背景色 #FF3300 5.73:1
コントラスト比 3.67:1 0.24 白/黒との 相対輝度の差 0.76 #FFAA00 背景色 #FFAA00 11.00:1 コントラスト比 1.91:1 0.5 白/黒との 相対輝度の差 0.5 #FFDD00 背景色 #FFDD00 15.59:1 コントラスト比 1.35:1 0.72 白/黒との 相対輝度の差 0.28 74
75.
白/黒との相対輝度の差が大きい色ほど はっきりと見えやすい。(という理解をしています 75
76.
コントラスト比の基準値は、視力低下/色覚異常/ 老眼を考慮した値なので、視力/色覚が正常な者の 感覚だけで判断すべきではありません。 76
77.
テキストは白のままでも 4.5:1 以上 確保できる組み合わせを探そう。 77
78.
まとめ 78
79.
• 4.5:1 • コントラスト比の測定は簡単! •
コントラストを高める方法はいろいろ 79 まとめ
80.
次回は 5月17日(金)の予定です! 80
81.
81 @SawadaStdDesign また来週!
Baixar agora