あかるいブランドカラーとコントラストの話 / bright brand colors and contrast

Slide 1

Slide 1 text

2020.12.23 Accessibility Step Vol.07 @mjmjsachi ͔͋Δ͍ϒϥϯυΧϥʔͱ ίϯτϥετͷ࿩

Slide 2

Slide 2 text

ߴ஌ࡏॅϑϦʔϥϯεσβΠφʔ ҹ࡮෺ʴ΢Σϒ ஍Ҭͷখن໛Ҋ݅ʴ౦ژͷҊ݅ ݸਓͰ͸͡ΊΔΞΫηγϏϦςΟ @mjmjsachi ؒౢࠫ஌

Slide 3

Slide 3 text

ΞΠίϯͱ༻్ɾ୅ସςΩετରԠදΛ࡞ͬͨ࿩

Slide 4

Slide 4 text

ίϯτϥετ

Slide 5

Slide 5 text

ίϯτϥετൺͱ͸ ৭ಉ࢜ͷ໌Δ͞ ʢ૬ରً౓ʣ ͷൺ཰ 21 : 1 A A A A A 1.16 : 1 1.92 : 1 5.74 : 1 12.6 : 1 #EEE #BBB #666 #333 #000

Slide 6

Slide 6 text

σβΠϯ͢Δ؀ڥͰ͸ݟ͍͑ͯͯ΋ʜ ϩʔϏδϣϯͷํɺ৭ऑͷํ ԰֎ͰεϚϗͰݟ͍ͯΔ ബ҉͍෦԰Ͱݟ͍ͯΔ ݹ͍Ϟχλ΍อޢϑΟϧϜ ٸ͗ͳ͕Βݟ͍ͯΔ

Slide 7

Slide 7 text

8FC$POUFOU"DDFTTJCJMJUZ(VJEFMJOFT 8$"( 6OEFSTUBOEJOH$POUSBTU .JOJNVN

Slide 8

Slide 8 text

8FC$POUFOU"DDFTTJCJMJUZ(VJEFMJOFT 8$"( 6OEFSTUBOEJOH/POUFYU$POUSBTU

Slide 9

Slide 9 text

ςΩετ 4.5 : 1 Ҏ্ 24pxҎ্ͷେ͖ͳจࣈ 18.5pxҎ্ͷଠࣈ UIίϯϙʔωϯτ ίϯςϯπͷཧղʹඞཁͳάϥϑΟοΫ ཁૉ ίϯτϥετൺ 3.0 : 1 Ҏ্ 3.0 : 1 Ҏ্

Slide 10

Slide 10 text

αΠτͰ࢖͏৭ Ͳ͏΍ܾͬͯΊͯ·͔͢ʁ

Slide 11

Slide 11 text

ग़యɿϩΰΛ࡞Δલʹ஌͓ͬͯ͘΂͖༗໊اۀͷϩΰͰ࢖ΘΕΔʮ৭ʯͱͦͷཧ༝

Slide 12

Slide 12 text

৘ใͷ఻ୡ ʢίϯτϥετ֬อʣ Πϝʔδͷԋग़

Slide 13

Slide 13 text

CASE STUDY

Slide 14

Slide 14 text

CASE 1 ໌Δ͍ϒϥϯυΧϥʔΛ࢖ͬͯ σβΠϯͨ͠৔߹

Slide 15

Slide 15 text

#F6BAB0 #7CC8B9 CASE 1 ϚϚΛָ͠Ή ϫλγΛָ͠Ή ࣾձͱͭͳ͕Δ ஍ҬͷϚϚ΍ঁੑΛԠԉ͢Δ ձࣾ঺հϖʔδ

Slide 16

Slide 16 text

CASE 1

Slide 17

Slide 17 text

5.83 5.03 CASE 1 จࣈ৭ #444

Slide 18

Slide 18 text

৘ใͷ఻ୡ Πϝʔδͷԋग़ CASE 1

Slide 19

Slide 19 text

αΠτͰ࢖͏৭ʺϩΰͷ৭ ͪͳΈʹ Ͱ΋0, ˞ཁঝೝ

Slide 20

Slide 20 text

LOGO BUTTON 4.31 BUTTON 4.87 BUTTON 5.66 BUTTON 7.46

Slide 21

Slide 21 text

CASE 2 ໌Δ͍ϒϥϯυΧϥʔΛ ܾΊͨ৔߹

Slide 22

Slide 22 text

CASE 2 ߴ஌ͷҿ৯ళʷӡૹձࣾ σϦόϦʔαʔϏε

Slide 23

Slide 23 text

#B0D137 CASE 2 %FMJHIU %FMJDJPVT %FMJWFSZ ر๬ʗ໌Δ͘ϑϨογϡʗؾܰͰศརʗ҆৺ ੑผ΍ੈ୅Λ໰Θͣ਌͠Έ΍͍͢Πϝʔδ

Slide 24

Slide 24 text

ϒϥϯυΧϥʔ͸ ໨ࢦ࢟͢΍ఏڙ͢ΔՁ஋Λ఻͑Δ

Slide 25

Slide 25 text

ϒϥϯυΧϥʔ͸ ༷ʑʹ࢖ΘΕͯ ʮϒϥϯυʯ ʹͳΔ

Slide 26

Slide 26 text

ϩΰϚʔΫ ࢖༻ΨΠυ CASE 2 Brand Color Brand Color Brand Color  ϒϥϯυΧϥʔΛഎܠ৭ʹ༻͍Δ৔߹͸ จࣈʹന৭͸࢖ΘͣɺࠇͳͲೱ৭Λ༻͍Δɻ OK ! ⁞จࣈͷࢹೝੑΛ֬อ͢ΔͨΊɺ ϒϥϯυΧϥʔ͸จࣈ৭ʹ࢖༻͠ͳ͍ɻ