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

2020年12月23日に開催された Accessibility Step Vol.07 オンライン「今年取り組んだアクセシビリティ」LTで発表したスライドです。
テキスト版はこちら

Transcript

1. 2020.12.23 Accessibility Step Vol.07 @mjmjsachi ͔͋Δ͍ϒϥϯυΧϥʔͱ
   ίϯτϥετͷ࿩
2. ߴ஌ࡏॅϑϦʔϥϯεσβΠφʔ
   ҹ࡮෺ʴ΢Σϒ
   ஍Ҭͷখن໛Ҋ݅ʴ౦ژͷҊ݅
   ݸਓͰ͸͡ΊΔΞΫηγϏϦςΟ @mjmjsachi ؒౢ
   ࠫ஌
3. ΞΠίϯͱ༻్ɾ୅ସςΩετରԠදΛ࡞ͬͨ࿩
4. ίϯτϥετ
5. ίϯτϥετൺͱ͸ ৭ಉ࢜ͷ໌Δ͞ ʢ૬ରً౓ʣ ͷൺ཰ 21 : 1 A A A A A 1.16 : 1 1.92 : 1 5.74 : 1 12.6 : 1 #EEE #BBB #666 #333 #000
6. σβΠϯ͢Δ؀ڥͰ͸ݟ͍͑ͯͯ΋ʜ ϩʔϏδϣϯͷํɺ৭ऑͷํ
   ԰֎ͰεϚϗͰݟ͍ͯΔ
   ബ҉͍෦԰Ͱݟ͍ͯΔ
   ݹ͍Ϟχλ΍อޢϑΟϧϜ
   ٸ͗ͳ͕Βݟ͍ͯΔ
7. 8FC
   $POUFOU
   "DDFTTJCJMJUZ
   (VJEFMJOFT
   8$"(
   
   6OEFSTUBOEJOH
   $POUSBTU
   .JOJNVN
   
8. 8FC
   $POUFOU
   "DDFTTJCJMJUZ
   (VJEFMJOFT
   8$"(
   
   6OEFSTUBOEJOH
   /POUFYU
   $POUSBTU
9. ςΩετ 4.5 : 1 Ҏ্ 24pxҎ্ͷେ͖ͳจࣈ 18.5pxҎ্ͷଠࣈ UIίϯϙʔωϯτ ίϯςϯπͷཧղʹඞཁͳάϥϑΟοΫ ཁૉ ίϯτϥετൺ 3.0 : 1 Ҏ্ 3.0 : 1 Ҏ্
10. αΠτͰ࢖͏৭
    Ͳ͏΍ܾͬͯΊͯ·͔͢ʁ
11. ग़యɿϩΰΛ࡞Δલʹ஌͓ͬͯ͘΂͖༗໊اۀͷϩΰͰ࢖ΘΕΔʮ৭ʯͱͦͷཧ༝
12. ৘ใͷ఻ୡ
    ʢίϯτϥετ֬อʣ Πϝʔδͷԋग़
13. CASE STUDY
14. CASE 1 ໌Δ͍ϒϥϯυΧϥʔΛ࢖ͬͯ
    σβΠϯͨ͠৔߹
15. #F6BAB0 #7CC8B9 CASE 1 ϚϚΛָ͠Ή
    ϫλγΛָ͠Ή
    ࣾձͱͭͳ͕Δ ஍ҬͷϚϚ΍ঁੑΛԠԉ͢Δ
    ձࣾ঺հϖʔδ
16. CASE 1
17. 5.83 5.03 CASE 1 จࣈ৭
    #444
18. ৘ใͷ఻ୡ Πϝʔδͷԋग़ CASE 1
19. αΠτͰ࢖͏৭
    ʺ
    ϩΰͷ৭ ͪͳΈʹ Ͱ΋0,
    ˞ཁঝೝ
20. LOGO BUTTON 4.31 BUTTON 4.87 BUTTON 5.66 BUTTON 7.46
21. CASE 2 ໌Δ͍ϒϥϯυΧϥʔΛ
    ܾΊͨ৔߹
22. CASE 2 ߴ஌ͷҿ৯ళʷӡૹձࣾ
    σϦόϦʔαʔϏε
23. #B0D137 CASE 2 %FMJHIU
    %FMJDJPVT
    %FMJWFSZ ر๬ʗ໌Δ͘ϑϨογϡʗؾܰͰศརʗ҆৺
    ੑผ΍ੈ୅Λ໰Θͣ਌͠Έ΍͍͢Πϝʔδ
24. ϒϥϯυΧϥʔ͸
    ໨ࢦ࢟͢΍ఏڙ͢ΔՁ஋Λ఻͑Δ
25. ϒϥϯυΧϥʔ͸
    ༷ʑʹ࢖ΘΕͯ ʮϒϥϯυʯ ʹͳΔ
26. ϩΰϚʔΫ
    ࢖༻ΨΠυ CASE 2 Brand Color Brand Color Brand Color  
    ϒϥϯυΧϥʔΛഎܠ৭ʹ༻͍Δ৔߹͸
    จࣈʹന৭͸࢖ΘͣɺࠇͳͲೱ৭Λ༻͍Δɻ OK ! ⁞
    จࣈͷࢹೝੑΛ֬อ͢ΔͨΊɺ
    ϒϥϯυΧϥʔ͸จࣈ৭ʹ࢖༻͠ͳ͍ɻ
27. ໌Δ͍ϒϥϯυΧϥʔ
    ʷ
    ίϯτϥετͰ
    ఻ΘΔσβΠϯ #a11y_step
28. ࠓޙͷ๊ෛ
30. ྲྀ͠ͷΞΫηγϏϦςΟγϟϯ
31. Step by Step Ͱ͖Δ͜ͱ͔Β࢝ΊΑ͏ɺ ଓ͚Α͏ Illustration : Open Peeps