$30 off During Our Annual Pro Sale. View Details »

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

majimasachi
December 23, 2020

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

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

majimasachi

December 23, 2020
Tweet

More Decks by majimasachi

Other Decks in Design

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