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
290
あかるいブランドカラーと コントラストの話 / 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
220
20241019-CUD友の会「困った!を解決するデザイン改訂版」交流会
majimasachi
0
330
20240921-図書館の実空間とデジタル資源の接点をデザインする-dtk55-Designing-the-interface-between-the-library's-physical-space-and-digital-resources
majimasachi
0
470
ブロックエディターではじめるアクセシビリティ / start accessibility with block editor
majimasachi
1
770
ウェブ制作に活かすユニバーサルデザインの視点 / Universal design for web design
majimasachi
10
1.9k
認知心理学に学ぶ 伝わる情報デザイン / Cognitive psychological information design
majimasachi
8
3.2k
スライド作成のチェックポイント / WordCamp Ogijima 2018 slideguide_jp
majimasachi
15
36k
Checkpoints for Creating Slides / WordCamp Ogijima 2018 slideguide-en
majimasachi
1
1k
明日からできるデザイン・コンテンツのアクセシビリティ入門2018 / A11y in Design and Contents
majimasachi
7
2.7k
Other Decks in Design
See All in Design
なぜ今必要?Figma×SmartHR×DMM.com×一休 エンジニア視点で考えるデザインシステム
hilokifigma
0
620
利用者が離れないUX/UIデザイン 長く使われる業務アプリデザインのポイント
ncdc
5
440
共通言語としてのデザイントークンと Figmaでの運用
kamy0042
0
240
東急URBAN HACKSのデザイナーって何やってるの? 〜Designer Night #1〜 組織横断のデザインの 取り組みについて
sig
1
270
オリジナルのデザイン地図を作ってみた!〜OpenMapTilesとMaputnikを活用した地図スタイル〜
hjmkth
1
160
ユーザーに向き合うデザインが介護・福祉の現場を変える / User-facing design changes the field of care and welfare
sms_tech
0
240
入社3ヶ月目のプロダクトデザイナー視点で見たヤプリ / Joining Yappli as a Product Designer: My Perspective After 90 Days
yappli_developers
0
120
デザイナーのお仕事(UI/UX GRAPHIC GROUP)
mirrativ
0
130
セブンデックス カルチャーブック
sevendex
0
2k
(第1回) アーキテクト・テックリード育成講座
masakaya
0
160
Дизайн современной услуги с Картой процесса-опыта
ashapiro
0
110
東急URBAN HACKSのデザイナーって何やってるの? 〜Designer Night #1〜
tak073
0
240
Featured
See All Featured
Why You Should Never Use an ORM
jnunemaker
PRO
55
9.2k
A better future with KSS
kneath
238
17k
Easily Structure & Communicate Ideas using Wireframe
afnizarnur
193
16k
Documentation Writing (for coders)
carmenintech
67
4.6k
How To Stay Up To Date on Web Technology
chriscoyier
790
250k
The Cult of Friendly URLs
andyhume
78
6.2k
The Web Performance Landscape in 2024 [PerfNow 2024]
tammyeverts
4
410
A Modern Web Designer's Workflow
chriscoyier
693
190k
Designing Experiences People Love
moore
140
23k
The Pragmatic Product Professional
lauravandoore
32
6.4k
RailsConf 2023
tenderlove
29
1k
The Myth of the Modular Monolith - Day 2 Keynote - Rails World 2024
eileencodes
21
2.5k
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