Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
あかるいブランドカラーと コントラストの話 / bright brand colors an...
Search
majimasachi
December 23, 2020
Design
2
340
あかるいブランドカラーと コントラストの話 / bright brand colors and contrast
2020年12月23日に開催された
Accessibility Step Vol.07 オンライン
「今年取り組んだアクセシビリティ」LTで発表したスライドです。
テキスト版はこちら
majimasachi
December 23, 2020
Tweet
Share
More Decks by majimasachi
See All by majimasachi
20250129_DAST28_実空間にデジタル資源の接点をデザインする
majimasachi
0
510
20241019-CUD友の会「困った!を解決するデザイン改訂版」交流会
majimasachi
0
400
20240921-図書館の実空間とデジタル資源の接点をデザインする-dtk55-Designing-the-interface-between-the-library's-physical-space-and-digital-resources
majimasachi
0
610
ブロックエディターではじめるアクセシビリティ / start accessibility with block editor
majimasachi
1
860
ウェブ制作に活かすユニバーサルデザインの視点 / Universal design for web design
majimasachi
10
2k
認知心理学に学ぶ 伝わる情報デザイン / Cognitive psychological information design
majimasachi
8
3.3k
スライド作成のチェックポイント / WordCamp Ogijima 2018 slideguide_jp
majimasachi
15
38k
Checkpoints for Creating Slides / WordCamp Ogijima 2018 slideguide-en
majimasachi
1
1.1k
明日からできるデザイン・コンテンツのアクセシビリティ入門2018 / A11y in Design and Contents
majimasachi
7
2.8k
Other Decks in Design
See All in Design
“ブロック”で作る、WordPress制作フロー変革のすすめ
koots2021
4
1.9k
A Platform Connecting Brand Philosophy and Assets: "LY Corporation Design Hub"
lycorptech_jp
PRO
0
400
数理的アプローチで挑むスマホUIのデザイン改善:タップ成功率推定ツール「Tappy」の社内活用事例 / Improving Smartphone UI Design with a Mathematical Approach: In-house Use Case of the Tap Success Rate Estimation Tool "Tappy"
lycorptech_jp
PRO
0
790
【30人中30人が3ヶ月平均180万収入アップ】マズロー安達の弟子、成功事例集
maslow_akkun
0
290
Мышление дизайнера историями. Как текстовые модели человеческого поведения помогают проектировать
ashapiro
0
400
地理院地図をもっと楽しく!れきちず新機能のご紹介
hjmkth
1
130
生成AIを活用した組み込みSW設計書検索システム開発
licux
7
1.4k
1920*1080pxに設定したケース / Google Slide Size Test
arthur1
0
3.3k
UXデザインはなぜ定着しないのか?
designstudiopartners
0
940
Marpで推しCSSスライドを作ろう! / marp-with-favorite-css
fujiemon
0
570
AI時代に、僕たちデザイナーはどう歩むか
kazuhirokimura
0
370
Portfolio 齋藤明敏 Hiroyuki Saito_守秘義務あり
crearedesign
0
280
Featured
See All Featured
Keith and Marios Guide to Fast Websites
keithpitt
411
22k
Design and Strategy: How to Deal with People Who Don’t "Get" Design
morganepeng
131
19k
Balancing Empowerment & Direction
lara
3
610
How to Ace a Technical Interview
jacobian
279
23k
Code Review Best Practice
trishagee
70
19k
Why Our Code Smells
bkeepers
PRO
339
57k
Making Projects Easy
brettharned
117
6.4k
Testing 201, or: Great Expectations
jmmastey
45
7.6k
"I'm Feeling Lucky" - Building Great Search Experiences for Today's Users (#IAC19)
danielanewman
229
22k
Dealing with People You Can't Stand - Big Design 2015
cassininazir
367
27k
Optimising Largest Contentful Paint
csswizardry
37
3.4k
VelocityConf: Rendering Performance Case Studies
addyosmani
332
24k
Transcript
2020.12.23 Accessibility Step Vol.07 @mjmjsachi ͔͋Δ͍ϒϥϯυΧϥʔͱ ίϯτϥετͷ
ߴࡏॅϑϦʔϥϯεσβΠφʔ ҹʴΣϒ ҬͷখنҊ݅ʴ౦ژͷҊ݅ ݸਓͰ͡ΊΔΞΫηγϏϦςΟ @mjmjsachi ؒౢࠫ
ΞΠίϯͱ༻్ɾସςΩετରԠදΛ࡞ͬͨ
ίϯτϥετ
ίϯτϥετൺͱ ৭ಉ࢜ͷ໌Δ͞ ʢ૬ରًʣ ͷൺ 21 : 1 A A A
A A 1.16 : 1 1.92 : 1 5.74 : 1 12.6 : 1 #EEE #BBB #666 #333 #000
σβΠϯ͢ΔڥͰݟ͍͑ͯͯʜ ϩʔϏδϣϯͷํɺ৭ऑͷํ ֎ͰεϚϗͰݟ͍ͯΔ ബ҉͍෦Ͱݟ͍ͯΔ ݹ͍ϞχλอޢϑΟϧϜ ٸ͗ͳ͕Βݟ͍ͯΔ
8FC$POUFOU"DDFTTJCJMJUZ(VJEFMJOFT 8$"( 6OEFSTUBOEJOH$POUSBTU .JOJNVN
8FC$POUFOU"DDFTTJCJMJUZ(VJEFMJOFT 8$"( 6OEFSTUBOEJOH/POUFYU$POUSBTU
ςΩετ 4.5 : 1 Ҏ্ 24pxҎ্ͷେ͖ͳจࣈ 18.5pxҎ্ͷଠࣈ UIίϯϙʔωϯτ ίϯςϯπͷཧղʹඞཁͳάϥϑΟοΫ ཁૉ
ίϯτϥετൺ 3.0 : 1 Ҏ্ 3.0 : 1 Ҏ্
αΠτͰ͏৭ Ͳ͏ܾͬͯΊͯ·͔͢ʁ
ग़యɿϩΰΛ࡞Δલʹ͓͖ͬͯ͘༗໊اۀͷϩΰͰΘΕΔʮ৭ʯͱͦͷཧ༝
ใͷୡ ʢίϯτϥετ֬อʣ Πϝʔδͷԋग़
CASE STUDY
CASE 1 ໌Δ͍ϒϥϯυΧϥʔΛͬͯ σβΠϯͨ͠߹
#F6BAB0 #7CC8B9 CASE 1 ϚϚΛָ͠Ή ϫλγΛָ͠Ή ࣾձͱͭͳ͕Δ ҬͷϚϚঁੑΛԠԉ͢Δ ձࣾհϖʔδ
CASE 1
5.83 5.03 CASE 1 จࣈ৭ #444
ใͷୡ Πϝʔδͷԋग़ CASE 1
αΠτͰ͏৭ʺϩΰͷ৭ ͪͳΈʹ Ͱ0, ˞ཁঝೝ
LOGO BUTTON 4.31 BUTTON 4.87 BUTTON 5.66 BUTTON 7.46
CASE 2 ໌Δ͍ϒϥϯυΧϥʔΛ ܾΊͨ߹
CASE 2 ߴͷҿ৯ళʷӡૹձࣾ σϦόϦʔαʔϏε
#B0D137 CASE 2 %FMJHIU %FMJDJPVT %FMJWFSZ رʗ໌Δ͘ϑϨογϡʗؾܰͰศརʗ҆৺ ੑผੈΛΘͣ͠Έ͍͢Πϝʔδ
ϒϥϯυΧϥʔ ࢦ࢟͢ఏڙ͢ΔՁΛ͑Δ
ϒϥϯυΧϥʔ ༷ʑʹΘΕͯ ʮϒϥϯυʯ ʹͳΔ
ϩΰϚʔΫ ༻ΨΠυ CASE 2 Brand Color Brand Color Brand Color
ϒϥϯυΧϥʔΛഎܠ৭ʹ༻͍Δ߹ จࣈʹന৭ΘͣɺࠇͳͲೱ৭Λ༻͍Δɻ OK ! ⁞จࣈͷࢹೝੑΛ֬อ͢ΔͨΊɺ ϒϥϯυΧϥʔจࣈ৭ʹ༻͠ͳ͍ɻ
໌Δ͍ϒϥϯυΧϥʔ ʷ ίϯτϥετͰ ΘΔσβΠϯ #a11y_step
ࠓޙͷ๊ෛ
None
ྲྀ͠ͷΞΫηγϏϦςΟγϟϯ
Step by Step Ͱ͖Δ͜ͱ͔Β࢝ΊΑ͏ɺ ଓ͚Α͏ Illustration : Open Peeps