Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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

73239a63bba7e11d6f2621caceef76d1?s=47 majimasachi
December 23, 2020

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

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

73239a63bba7e11d6f2621caceef76d1?s=128

majimasachi

December 23, 2020
Tweet

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. ࠓޙͷ๊ෛ

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

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