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 and contrast
Search
majimasachi
December 23, 2020
Design
2
220
あかるいブランドカラーと コントラストの話 / 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
ブロックエディターではじめるアクセシビリティ / start accessibility with block editor
majimasachi
1
690
ウェブ制作に活かすユニバーサルデザインの視点 / Universal design for web design
majimasachi
10
1.7k
認知心理学に学ぶ 伝わる情報デザイン / Cognitive psychological information design
majimasachi
8
3k
スライド作成のチェックポイント / WordCamp Ogijima 2018 slideguide_jp
majimasachi
14
33k
Checkpoints for Creating Slides / WordCamp Ogijima 2018 slideguide-en
majimasachi
1
930
明日からできるデザイン・コンテンツのアクセシビリティ入門2018 / A11y in Design and Contents
majimasachi
7
2.5k
インクルーシブに楽しむアクセシビリティ
majimasachi
4
840
Other Decks in Design
See All in Design
UX/UI改善に貢献するユーザーテストとは? 基礎知識から実施のプロセスまで解説
ncdc
0
320
業務システムのUX/UI設計ノウハウを解説。デザイナー不在で失敗しないために身につけるべき基本とは?
ncdc
2
260
Ride or Die Animatics
warwatkar
0
140
JBUG東京#22登壇資料_日頃クライアントワークを行っているディレクターが自社コーポレートサイトリニューアルを担当して学んだこと
webnaut
0
180
Webアプリケーションアクセシビリティ解説ウェビナー「8章 アクセシブルなUI設計の原理を導く」
magi1125
1
160
デザイン組織の一人目マネージャーが啜る泥水と美味しいビールに向けてTRYすること
ryoya_frst
0
180
20231122_Design Leader Impact Award_Presentation_FAKE Okazaki
okazakityo
1
240
文化に寄りそうデザイン
recruitengineers
PRO
4
910
3D空間を扱うUI表現とユーザビリティ
akinen
0
440
Product-Writing
aguringo
6
2.8k
デザイナー採用 3社目で学び中のこと / Learnings of Designer Recruitment | Yasuhiro Yokota
yasuhiroyokota
0
170
デザインシステムで解消するさまざまな分断
hirataaa0220
1
170
Featured
See All Featured
The Cult of Friendly URLs
andyhume
74
5.7k
Fireside Chat
paigeccino
20
2.6k
Sharpening the Axe: The Primacy of Toolmaking
bcantrill
15
1.4k
Building Your Own Lightsaber
phodgson
98
5.7k
Fight the Zombie Pattern Library - RWD Summit 2016
marcelosomers
226
16k
Rails Girls Zürich Keynote
gr2m
91
13k
From Idea to $5000 a Month in 5 Months
shpigford
377
45k
個人開発の失敗を避けるイケてる考え方 / tips for indie hackers
panda_program
60
14k
Done Done
chrislema
178
15k
How GitHub (no longer) Works
holman
304
140k
Responsive Adventures: Dirty Tricks From The Dark Corners of Front-End
smashingmag
243
20k
[RailsConf 2023 Opening Keynote] The Magic of Rails
eileencodes
9
8.3k
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