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

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

Transcript

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

   View Slide

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

   View Slide

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

   View Slide

4. ίϯτϥετ
   

   View Slide

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
   

   View Slide

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

   View Slide

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

   View Slide

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

   View Slide

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

   View Slide

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

    View Slide

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

    View Slide

12. ৘ใͷ఻ୡ
    ʢίϯτϥετ֬อʣ
    Πϝʔδͷԋग़
    

    View Slide

13. CASE STUDY
    

    View Slide

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

    View Slide

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

    View Slide

16. CASE 1
    

    View Slide

17. 5.83
    5.03
    CASE 1
    จࣈ৭
    #444
    

    View Slide

18. ৘ใͷ఻ୡ Πϝʔδͷԋग़
    CASE 1
    

    View Slide

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

    View Slide

20. LOGO
    BUTTON
    4.31 BUTTON 4.87
    BUTTON
    5.66 BUTTON 7.46
    

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

27. ໌Δ͍ϒϥϯυΧϥʔ
    ʷ
    ίϯτϥετͰ
    ఻ΘΔσβΠϯ
    #a11y_step
    

    View Slide

28. ࠓޙͷ๊ෛ
    

    View Slide

29. View Slide

30. ྲྀ͠ͷΞΫηγϏϦςΟγϟϯ
    

    View Slide

31. Step by Step
    Ͱ͖Δ͜ͱ͔Β࢝ΊΑ͏ɺ
    ଓ͚Α͏
    Illustration : Open Peeps
    

    View Slide