iOSDC Japan 2019 60 mins for color

色の難しい話に負けない体づくり60分 #iosdc #b
https://iosdc.jp/2019/
https://fortee.jp/iosdc-japan-2019/proposal/760a3747-b7d3-4b1a-a141-85a93a31f66d

Transcript

1. ৭ͷ೉͍͠࿩ʹෛ͚ͳ͍

   ମͮ͘Γ60෼
   iOSDC Japan 2019
   

   View Slide

2. @S_Shimotori_pub
   ▸ μʔΫϞʔυ೿
   ▸ ৭Λ׬શʹ †ཧղ† ͨ͠ʢͯ͠ͳ͍ʣ
   ▸ σβΠϯΘ͔Γ·ͤΜ
   ▸ ࠓ೥΋ωοτϫʔΫͯ͠·͢
   2
   

   View Slide

3. ৭ͷ࿩͸೉͍͠ʂ
   3
   

   View Slide

4. 4
   https://www.tryswift.co/events/2019/tokyo/jp/#accessibility
   

   View Slide

5. 5
   (R, G, B)co
   mpo
   n
   en
   t =
   CC
   sRGB
   12.92
   , if CC
   sRGB
   ≤ 0.03928
   (
   CC
   sRGB
   + 0.055
   1.055 )
   2.4
   , otherwise
   co
   n
   trast =
   L
   1
   + 0.05
   L2
   + 0.05
   lu min
   an
   ce = 0.2126 × R + 0.7152 × G + 0.0722 × B
   https://raw.githubusercontent.com/emarley/ColorContrast/master/ColorContrast.pdf
   

   View Slide

6. View Slide

7. 7
   https://developer.apple.com/design/human-interface-guidelines/ios/visual-design/color/
   

   View Slide

8. View Slide

9. ৭ͷ࿩͸೉͍͠ʂ
   ࢲͨͪΛ೰·ͤΔ৭ͷ೉͍͠࿩
   ▸ ΠϥϨʹiPhoneͷεΫγϣΛ഑ஔͨ͠ΒϠόΠ৭ʹͳͬͨ

   ॿ͚ͯʂ
   ▸ HIG Colorʹࡌ͍ͬͯΔṖͷ೒৭ը૾͸Կऀʁ
   ▸ ৭֮ҟৗͷํ͸Կ৭ͷ۠ผ͕ۤखͳΜ͚ͩͬ……ʁ
   ▸ ͰɺίϯτϥετൺͬͯԿͰ͚ͨͬ͠ʁ
   ▸ μʔΫϞʔυ͍ͬͯ͏ͷ͕࠷ۙͷྲྀߦΓͳͷʁͳΜͰʁ
   9
   

   View Slide

10. ෮शɾ

    ޫͷࡾݪ৭ͱUIColor
    10
    

    View Slide

11. ෮शɾޫͷࡾݪ৭ͱUIColor
    ޫͷࡾݪ৭
    ▸ ੺ & ྘ & ੨ͷ3৭Ͱ΄ͱΜͲͷ৭Λ࡞Γग़͢͜ͱ͕Ͱ͖Δ
    ▸ ৭ΛՃ͑Δͱ໌Δ͘ͳΔʢՃ๏ࠞ৭ʣ
    ▸ cf. CMYKʹΑΔݮ๏ࠞ৭
    11
    Α͘ݟ͔͚ΔՃ๏ࠞ৭ͷਤ
    

    View Slide

12. ෮शɾޫͷࡾݪ৭ͱUIColor
    UIColorͰ৭Λࢦఆ͢Δ
    ▸ γεςϜΧϥʔ໊
    ▸ RGBίϯϙʔωϯτ஋
    ▸ HSBίϯϙʔωϯτ஋
    ▸ ଞɺͳΜ͔Α͘Θ͔ΒΜ΍͕͍͔ͭͭ͘ɻ
    ▸ SwiftUI Color.initʮNo overview available.ʯ
    12
    

    View Slide

13. ෮शɾޫͷࡾݪ৭ͱUIColor
    RGBίϯϙʔωϯτ஋Ͱ৭Λࢦఆ
    ▸ ੺ & ྘ & ੨ͷͦΕͧΕʹ0.0ʙ1.0ͷ஋Λ༩͑ͯࢦఆ
    ▸ υΩϡϝϯτʹ͸΋ͬͱ͍ΖΜͳ͜ͱ͕ॻ͍ͯ͋Δ͕

    ςΩτʔʹ࢖͑Δ
    13
    ྩ࿨ - കɹ#EAADBD
    UIColor(red: 234/255, green: 173/255, blue: 189/255, alpha: 1)
    

    View Slide

14. ΠϥϨʹiPhoneͷ

    εΫγϣΛ഑ஔͨ͠Β

    Ϡό͍৭ʹͳͬͨ

    ॿ͚ͯʂ
    14
    ※ΠϥϨ = Adobe Illustrator
    

    View Slide

15. View Slide

16. View Slide

17. View Slide

18. View Slide

19. View Slide

20. View Slide

21. ΠϥϨʹiPhoneͷεΫγϣΛ഑ஔͨ͠ΒϠό͍৭ʹͳͬͨॿ͚ͯʂ
    ੺͍͸͕ͣ੨͘ͳͬͯ͠·͏୯৭ը૾Λͭ͘Δ
    21
    →
    $ brew install imagemagick
    
    $ magick -size 100x100 xc:#FF00000000FF output.png
    
    

    View Slide

22. ΠϥϨʹiPhoneͷεΫγϣΛ഑ஔͨ͠ΒϠό͍৭ʹͳͬͨॿ͚ͯʂ
    ੺͍͸͕ͣ੨͘ͳͬͯ͠·͏୯৭ը૾Λͭ͘Δ
    22
    →
    $ brew install imagemagick
    
    $ magick -size 100x100 xc:#FF00000000FF output.png
    

    View Slide

23. ΠϥϨʹiPhoneͷεΫγϣΛ഑ஔͨ͠ΒϠό͍৭ʹͳͬͨॿ͚ͯʂ
    ৭ਂ౓ / color depth
    ▸ 1pixel͋ͨΓʹର͠ԿbitΛ༻͍ͯ৭Λදݱ͍ͯ͠Δ͔
    ▸ 24bits per pixelͷͱ͖ͷ੺ͷΧϥʔίʔυ͸#FF0000
    ▸ 48bits per pixelͷͱ͖ͷ੺ͷΧϥʔίʔυ͸#FFFF00000000
    ▸ iPhoneͷσΟεϓϨΠ͸48bits per pixelରԠ
    ▸ දݱͰ͖Δ৭ͷ਺͸ͳΜͱ65536^3छʂ
    ▸ imagemagickͷidentifyͰௐ΂ΒΕΔ
    23
    

    View Slide

24. ΠϥϨʹiPhoneͷεΫγϣΛ഑ஔͨ͠ΒϠό͍৭ʹͳͬͨॿ͚ͯʂ
    12ܻͷRGBΧϥʔίʔυΛਖ਼͘͠ಡΜͰΈΔ
    24
    # FF00 0000 00FF
    65280
    65535
    0
    65535
    255
    65535
    ΄΅ਅͬ੺
    

    View Slide

25. ΠϥϨʹiPhoneͷεΫγϣΛ഑ஔͨ͠ΒϠό͍৭ʹͳͬͨॿ͚ͯʂ
    ΠϥϨ͕ಡΜͩͱ͖
    25
    # FF00 0000 00FF
    ಥવͷ੨
    0
    255
    255
    255
    0
    255
    

    View Slide

26. View Slide

27. View Slide

28. View Slide

29. ΠϥϨʹiPhoneͷεΫγϣΛ഑ஔͨ͠ΒϠό͍৭ʹͳͬͨॿ͚ͯʂ
    ʮiPhone͸48bppରԠͳΜͩΑʂʯ
    ▸ When appropriate, use the Display P3 color profile at 16
    bits per pixel (per channel) and export images in PNG
    format.
    29
    https://developer.apple.com/design/human-interface-guidelines/ios/visual-design/color/
    
    

    View Slide

30. ΠϥϨʹiPhoneͷεΫγϣΛ഑ஔͨ͠ΒϠό͍৭ʹͳͬͨॿ͚ͯʂ
    ΠϥϨʹiPhoneͷεΫγϣΛ഑ஔͨ͠ΒϠό͍৭ʹͳͬͨॿ͚ͯʂ
    ▸ iPhoneʢͷεΫγϣʣ͸৭ਂ౓48bpp
    ▸ ΠϥϨ͸֤৭ͷԼҐ8bit͚ͩݟͯը૾ΛಡΈࠐΉ
    ▸ ରॲ๏ͦͷ1ɿఘΊͯϑΥτγϣΛ࢖͏
    ▸ ରॲ๏ͦͷ2ɿ24bppʹམͱ͢
    ▸ ਓؒͷ໨ʹ͸Θ͔Βͳ͍ɺଟ෼
    ▸ $ magick input.png -define png:bit-depth=8 output.png
    30
    

    View Slide

31. ৭ͷ࿩͸೉͍͠ʂ
    ࢲͨͪΛ೰·ͤΔ৭ͷ೉͍͠࿩
    ▸ ΠϥϨʹiPhoneͷεΫγϣΛ഑ஔͨ͠ΒϠόΠ৭ʹͳͬͨ
    ॿ͚ͯʂ
    ▸ HIG Colorʹࡌ͍ͬͯΔṖͷ೒৭ը૾͸Կऀʁ
    ▸ ৭֮ҟৗͷํ͸Կ৭ͷ۠ผ͕ۤखͳΜ͚ͩͬ……ʁ
    ▸ ͰɺίϯτϥετൺͬͯԿͰ͚ͨͬ͠ʁ
    ▸ μʔΫϞʔυ͍ͬͯ͏ͷ͕࠷ۙͷྲྀߦΓͳͷʁͳΜͰʁ
    31
    

    View Slide

32. 32
    :done:
    ……ϚδͰʁ
    

    View Slide

33. ෮शɾޫͷࡾݪ৭ͱUIColor
    RGBΧϥʔίʔυͰ͸ෆे෼ʂ
    ▸ ࡾݪ৭ͦΕͧΕͷ৭͕ͲΜͳ৭ͳͷ͔Θ͔Βͳ͍
    ▸ ઱΍͔ͳ੺ʁ͘͢Μͩ੺ʁ
    ▸ ಉ͡#FF0000Ͱ΋ҧ͏੺৭͔΋͠Εͳ͍
    ▸ ޫͷࡾݪ৭Ͱ͢΂ͯͷ৭ΛදݱͰ͖ΔΘ͚Ͱ͸ͳ͍
    33
    

    View Slide

34. ෮शɾޫͷࡾݪ৭ͱUIColor
    RGBΧϥʔίʔυͰ͸ෆे෼ʂ
    ▸ ࡾݪ৭ͦΕͧΕͷ৭͕ͲΜͳ৭ͳͷ͔Θ͔Βͳ͍
    ▸ ઱΍͔ͳ੺ʁ͘͢Μͩ੺ʁ
    ▸ ಉ͡#FF0000Ͱ΋ҧ͏੺৭͔΋͠Εͳ͍
    ▸ ޫͷࡾݪ৭Ͱ͢΂ͯͷ৭ΛදݱͰ͖ΔΘ͚Ͱ͸ͳ͍
    34
    

    View Slide

35. ෮शɾޫͷࡾݪ৭ͱUIColor
    Մࢹޫͱ೾௕
    ▸ ޫʹ͸೾ͷੑ࣭͕͋Γɺ೾௕ͷҧ͍Ͱੑ࣭΋ҟͳΔ
    ▸ ώτͷՄࢹޫͷ೾௕͸380nmʙ780nmͷ͋ͨΓ
    35
    https://commons.wikimedia.org/wiki/File:Linear_visible_spectrum.svg
    

    View Slide

36. ෮शɾޫͷࡾݪ৭ͱUIColor
    ਲ਼ମࡉ๔
    ▸ ৭Λೝࣝ͢ΔͨΊͷࡉ๔
    ▸ Sਲ਼ମɺMਲ਼ମɺLਲ਼ମͷ3छྨ
    ▸ short͔medium͔long͔
    ▸ چ໊ɿ੨ਲ਼ମɺ྘ਲ਼ମɺ੺ਲ਼ମ
    36
    https://commons.wikimedia.org/wiki/File:Cone-response-en.svg
    

    View Slide

37. ෮शɾޫͷࡾݪ৭ͱUIColor
    ਓͷ໨Λὃͯ͠৭Λ࡞Δ
    ▸ ਲ਼ମࡉ๔͸ͲΜͳ৭Λ૊Έ߹Θ͔ͤͨΛݟഁΕͳ͍

    ˠ গͳ͍৭਺Ͱ͞·͟·ͳ৭Λೝࣝͤ͞Δ͜ͱ͕Ͱ͖Δ
    37
    Y
    R
    G
    Sਲ਼ମ Mਲ਼ମ Lਲ਼ମ
    

    View Slide

38. ෮शɾޫͷࡾݪ৭ͱUIColor
    ౳৭࣮ݧ
    ▸ ੺ɺ྘ɺ੨ͷ3৭Λࠞͥ߹Θͤɺࢦఆ͞Εͨ୯৭ޫͱ

    ಉ͡৭Λ࡞Δ
    ▸ ੺ɿ700.0nmɺ྘ɿ546.1nmɺ੨ɿ435.8nm
    38
    ԫ৭׬੒ʂ
    Έ΄Μ
    

    View Slide

39. ෮शɾޫͷࡾݪ৭ͱUIColor
    ౳৭࣮ݧ - ݁Ռ
    ▸ ࡞Εͳ͍৭͕͋Δ͜ͱ͕ൃ֮ͨ͠
    ▸ ઱΍͔ͳ྘৭Λ࡞Δ͜ͱ͕Ͱ͖ͳ͔ͬͨ
    ▸ ੺৭Λݟຊʹࠞͥͯ͘͢Μͩ྘৭ʹ͢Δ͜ͱͰಉ͡৭ʹͳͬͨ
    39
    https://commons.wikimedia.org/wiki/File:CIE1931_RGBCMF.svg
    ↑
    Ͳ
    ͷ
    ͘
    Β
    ͍
    ࠞ
    ͥ
    ͨ
    ͔
    

    View Slide

40. ෮शɾޫͷࡾݪ৭ͱUIColor
    RGBΧϥʔίʔυͰ͸ෆे෼ʂʢ࠶ܝʣ
    ▸ ࡾݪ৭ͦΕͧΕͷ৭͕ͲΜͳ৭ͳͷ͔Θ͔Βͳ͍
    ▸ ޫͷࡾݪ৭Ͱ͢΂ͯͷ৭ΛදݱͰ͖ΔΘ͚Ͱ͸ͳ͍
    40
    

    View Slide

41. ෮शɾޫͷࡾݪ৭ͱUIColor
    ͜ͷ̏ͭΛ͓͑͞Α͏ʂ
    ▸ ࡾܹࢗ஋ ͱ͍͏ύϥϝʔλͰߟ͑Δ
    ▸ σΟεϓϨΠͱ͍Θͣ৭ͷݟ͑ํશൠʹ࢖͏΋ͷ
    ▸ ܭࢉ͠΍͍͢ੈքʢ XYZද৭ܥ ʣΛ࡞Γग़ͯ͠ߟ͑Δ
    ▸ ਺ֶతͳௐ੔Λࢪ͚ͨͩ͠ͷ΋ͷ
    ▸ ৭౓ਤ ͱݺ͹ΕΔάϥϑͰ͢΂ͯͷ৭Λ؅ཧ
    41
    

    View Slide

42. XYZͷੈք΁Α͏ͦ͜ʂ
    42
    

    View Slide

43. XYZͷੈք΁Α͏ͦ͜ʂ
    RGBܹࢗ஋
    ▸ ޫͷࡾݪ৭Λ࢖ͬͯݟຊͱಉ͡৭Λ࡞Δͷʹඞཁͳ৭ͷྔ
    43
    700.0nm
    546.1nm
    435.8nm
    ܹࢗ஋
    

    View Slide

44. XYZͷੈք΁Α͏ͦ͜ʂ
    ܹࢗ஋Λ࢖ͬͯߟ͍͑ͯ͘
    ▸ શͯͷ৭͸ܹࢗ஋ʢ3ͭͷ਺஋ͷ૊ʣͰදݱͰ͖Δ
    ▸ RGBܹࢗ஋Λ༻͍ΔͱɺҰ෦ͷ৭Λ͏·͘දݱͰ͖ͣʹ

    ϚΠφεͷ஋ʹͳΔ͜ͱ͕͋Δ
    44
    ↓
    ܭࢉ͠΍͍͢Α͏ͳܹࢗ஋ʹվ଄ͪ͠Ό͑ʂ
    

    View Slide

45. XYZͷੈք΁Α͏ͦ͜ʂ
    RGBܹࢗ஋Λվ଄ͯ͠XYZܹࢗ஋ʹ͢Δ
    ▸ XYZܹࢗ஋͸RGB൛ͷܹࢗ஋Λͪΐͬͱ͍͚ͬͨͩ͡ͷ΋ͷ
    ▸ ܭࢉ͠΍͍͢Α͏ʹௐ੔
    ▸ Yً͕౓୲౰ʹͳΔΑ͏ʹௐ੔ ʲ௒ॏཁɾςετʹग़·͢ʳ
    ▸ ྘৭͕1൪໌Δ͘ݟ͑ΔͷͰɺ࣮࣭྘৭ͷ୲౰Ͱ΋͋Δ
    ▸ Z͕୹೾௕ʢ੨৭ʣͷ୲౰ʹͳΔΑ͏ʹௐ੔
    ▸ ͳͲͳͲ
    ▸ XYZܹࢗ஋Λ࢖ͬͯͦΕͧΕͷ৭ΛදݱʢXYZද৭ܥʣ
    45
    

    View Slide

46. XYZͷੈք΁Α͏ͦ͜ʂ
    ً౓ʁ໌౓ʁ
    ▸ ً౓ͱ໌౓͸ಉ͡͡Όͳ͍ʂ
    ▸ ً౓ / luminance
    ▸ ৺ཧ෺ཧྔ
    ▸ ໘ੵͰޫͷڧ͞Λׂͬͨ΋ͷ
    ▸ ໌౓ / brightness
    ▸ ৭ͷࡾଐੑͷ1ͭ
    ▸ RGBͷ஋͔ΒٻΊΔ
    46
    

    View Slide

47. XYZͷੈք΁Α͏ͦ͜ʂ
    XYZܹࢗ஋Λར༻ͯ͢͠΂ͯͷ৭Λάϥϑʹ͢Δ
    ▸ 3ͭͷύϥϝʔλΛͦͷ··ࡾ࣍ݩάϥϑʹϓϩοτ
    ▸ ʮͲͷ͘Β͍ͷൺ཰Ͱ৭Λࠞͥͯ࡞͔ͬͨʯͳΒ

    ฏ໘Ͱ΋දݱͰ͖Δʢ xy৭౓ਤ ʣ
    ▸ 3࣍ݩάϥϑΛಡΉͷ͸೉͍͠ͷͰɺͪ͜Βͷํ͕ศར
    47
    

    View Slide

48. XYZͷੈք΁Α͏ͦ͜ʂ
    xy৭౓ਤ
    ▸ ʢ΄΅ʣ͢΂ͯͷ৭Λࡌͤͨάϥϑ
    ▸ ໌Δ͞ͷҧ͏৭͸ࡌ͍ͬͯͳ͍
    ▸ ࠲ඪΛݴ͑͹ਖ਼֬ʹ৭Λൺ΂ΒΕΔ
    ▸ σΟεϓϨΠ͕දࣔͰ͖Δ৭Λ

    ࣔ͢ͷʹศར
    ▸ ୺ͷํͷ৭͸ਖ਼֬ʹදࣔͰ͖ͳ͍
    48
    https://commons.wikimedia.org/wiki/File:CIE1931xy_blank.svg
    

    View Slide

49. XYZͷੈք΁Α͏ͦ͜ʂ
    ࡾܹࢗ஋XYZͱ৭౓xyʢఆٛVer.ʣ
    49
    X = K
    ∫
    780
    380
    S(λ)R(λ)¯
    x(λ)dλ
    Y = K
    ∫
    780
    380
    S(λ)R(λ)¯
    y(λ)dλ
    Z = K
    ∫
    780
    380
    S(λ)R(λ)¯
    z(λ)dλ
    ͨͩ͠
    ∫
    780
    380
    dλ
    ࠷େࢹײޮՌ౓ʢఆ਺ʣ
    Մࢹޫ380nmʙ780nm
    S(λ) ޫݯͷ෼ޫ෼෍
    R(λ) ෺ମͷ෼ޫ൓ࣹ཰ or ಁա཰
    ¯
    x(λ), ¯
    y(λ), ¯
    z(λ) ଌ৭ඪ४؍ଌऀͷ౳৭ؔ਺

    ౎߹Α͘༻ҙͨ͠ͷ͸ܹࢗ஋Ͱ͸ͳ͘ίϨ
    K
    x =
    X
    X + Y + Z
    y =
    Y
    X + Y + Z
    z =
    Z
    X + Y + Z
    = 1 − x − y
    

    View Slide

50. XYZͷੈք΁Α͏ͦ͜ʂ
    ৭ۭؒ / color space
    ▸ σΟεϓϨΠ΍ϓϦϯλ͕ѻ͏৭ͷൣғ΍ํ๏Λࣔͨ͠΋ͷ
    ▸ ݪ৭ / primariesɿݪ৭͕ͦΕͧΕͲͷ৭͔
    ▸ ৭Ҭ / color gamutɿѻ͑Δ৭ͷൣғ͸Ͳ͔͜
    ▸ ΨϯϚ஋ / gamma transfer functionɿ໌Δ͞ʹؔ͢Δௐ੔۩߹
    ▸ ͞·͟·ͳن͕֨͋Δ
    50
    

    View Slide

51. XYZͷੈք΁Α͏ͦ͜ʂ
    ΨϯϚ஋ / gamma transfer function
    ▸ ৭ʹͲͷ͘Β͍ͷิਖ਼ΛՃ͑Δ͔
    ▸ ิਖ਼͕ՃΘ͍ͬͯͳ͍৭͸ઢܗ / linearͱݺ͹ΕΔ
    ▸ ݹ͘͸ϒϥ΢ϯ؅ʹΑΔ৭ͷมԽΛमਖ਼͢Δ΋ͷ
    ▸ ਓؒ͸໌Δ͍৭ΑΓ҉͍৭ͷํͷมԽʹහײ
    51
    ↓
    ݟΔ؀ڥʹԠͨ͡ิਖ਼ΛՃ͑Δʂ
    

    View Slide

52. View Slide

53. ▸ ্͸ิਖ਼Λ͢Δ͜ͱͰ៉ྷʹݟ͍͑ͯΔ
    ▸ Χϥʔίʔυ͸ΨϯϚิਖ਼ޙͷঢ়ଶʹ߹Θͤͨύϥϝʔλ
    ▸ Լ͸ิਖ਼Λ͍ͯ͠ͳ͍ͷͰҰݟෆࣗવ
    ▸ ܹࢗ஋Yʹରͯ͠͸஧࣮
    XYZͷੈք΁Α͏ͦ͜ʂ
    ΨϯϚิਖ਼ͱઢܗ
    53
    άϨʔεέʔϧ
    ܹࢗ஋Y
    0.0
    ʛ
    ʛ

    0
    1.0
    ʛ
    ʛ

    1.0
    

    View Slide

54. XYZͷੈք΁Α͏ͦ͜ʂ
    sRGB৭ۭؒ / standard Red Green Blue
    ▸ IEC͕1998೥ʹ੍ఆͨ͠ن֨
    ▸ ౰࣌ͷΧϥʔCRTσΟεϓϨΠʢϒϥ΢ϯ؅ʣΛҙࣝͨ͠΋ͷ
    ▸ ఆ൪ɺΑ͘ݟΔ
    ▸ iPhone΋جຊతʹ͸͜ͷ৭ۭؒΛ࢖͏
    54
    

    View Slide

55. XYZͷੈք΁Α͏ͦ͜ʂ
    DCI P3৭ۭؒ
    ▸ Digital Cinema InitiativeʹΑΔ৭ۭؒɻཁ͢Δʹөը༻
    ▸ ৭Ҭ͸sRGBΑΓ΋޿͍
    ▸ ΨϯϚ஋΋sRGBͱҟͳ͓ͬͯΓɺ҉͍؀ڥͰݟΔ͜ͱΛ૝
    ఆͨ͠΋ͷ
    55
    

    View Slide

56. XYZͷੈք΁Α͏ͦ͜ʂ
    Display P3৭ۭؒ
    ▸ Apple͕࡞ͬͨ৭ۭؒͰɺiPhone7Ҏ߱Ͱ࢖༻Մೳ
    ▸ > This color space uses the DCI P3 primaries, a D65 white
    point, and the sRGB transfer function.
    ▸ ҙ༁ɿ৭Ҭ͸DCI P3ͱಉ͡Ͱ޿ΊɺͰ΋σΟεϓϨΠΛݟΔ؀
    ڥ͸sRGBͱಉ͡૝ఆʂ
    56
    https://developer.apple.com/documentation/coregraphics/cgcolorspace/1408916-displayp3
    

    View Slide

57. XYZͷੈք΁Α͏ͦ͜ʂ
    sRGBͱDisplay P3ͰͲͷ͘Β͍ҧ͏ͷʁ
    ▸ Display P3ͷ΄͏͕ͨ͘͞Μͷछྨͷ྘৭ΛදࣔͰ͖Δ
    ▸ ࡾ֯ܗͷ௖఺͕֤৭ۭؒͷݪ৭
    ▸ ࡾ֯ܗͰࣔͨ͠ΤϦΞ͕֤৭ۭؒͷ৭Ҭ
    57
    https://developer.apple.com/design/human-interface-guidelines/ios/visual-design/color/
    

    View Slide

58. 58
    https://developer.apple.com/design/human-interface-guidelines/ios/visual-design/color/
    

    View Slide

59. XYZͷੈք΁Α͏ͦ͜ʂ
    #00FF00Λݟൺ΂ͯΈΔ - UIColor.init
    ▸ UIColor( red: 0, green: 1, blue: 0, alpha: 1)
    
    ▸ UIColor(displayP3Red: 0, green: 1, blue: 0, alpha: 1)
    59
    sRGB Display P3
    ͪΐͬͱ઱΍͔ʁ
    

    View Slide

60. XYZͷੈք΁Α͏ͦ͜ʂ
    Color.initͷυΩϡϝϯτΛಡΜͰΈΔ
    ▸ init(Color.RGBColorSpace,

    red: Double, green: Double, blue: Double,

    opacity: Double)
    
    ▸ ͑ʁNo overview availableʁ
    ▸ ৭ۭؒͱͯ͠.displayP3ɺ.sRGBɺ.sRGBLinear͕ࢦఆͰ͖Δ
    60
    https://developer.apple.com/documentation/uikit/uicolor/1621925-init
    

    View Slide

61. XYZͷੈք΁Α͏ͦ͜ʂ
    ExtendedͳsRGB
    ▸ UIColorͷΠχγϟϥΠβ͸ϚΠφεͷ஋΍1.0ΑΓେ͖͍஋
    ΛऔΔ͜ͱ͕Ͱ͖ΔʢiOS10ʙʣ
    ▸ Display P3্ͰදݱͰ͖Δ͕sRGBͰදݱͰ͖ͳ͍৭ͳͲ
    61
    red: 0
    
    green: 1
    
    blue: 0
    red: -0.511767
    
    green: 1.01831
    
    blue: -0.310667
    CGColorSpace.extendedSRGB CGColorSpace.displayP3
    

    View Slide

62. XYZͷੈք΁Α͏ͦ͜ʂ
    UIColor.initͷઆ໌ΛಡΜͰΈΔ
    ▸ > On applications linked for iOS 10 or later, the color is
    specified in an extended color space, and the input value
    is never clamped.
    ▸ ҙ༁ɿෳ਺ͷ৭ۭؒΛಉ࣌ʹѻ͑ΔҎ্ɺຊདྷ͋Γ͑ͳ͍਺஋
    ΛೖΕͯ΋खΛՃ͑ͣͦͷ··ѻ͏Αɻ
    62
    https://developer.apple.com/documentation/uikit/uicolor/1621925-init
    

    View Slide

63. XYZͷੈք΁Α͏ͦ͜ʂ
    ࣮ࡍʹ৭ۭؒΛݟൺ΂ͯΈΔ - ColorSync Utility.app
    63
    

    View Slide

64. HIG Colorʹࡌ͍ͬͯΔ

    Ṗͷ೒৭ը૾͸Կऀʁ
    64
    

    View Slide

65. HIG Colorʹࡌ͍ͬͯΔṖͷ೒৭ը૾͸Կऀʁ
    HIG Colorʹࡌ͍ͬͯΔṖͷ೒৭ը૾͸Կऀʁ
    ▸ ೒৭෦෼ɿxy৭౓ਤ
    ▸ ࢲ͕ͨͪೝࣝͰ͖Δ৭Λશ෦ࡌͤͨάϥϑ
    ▸ ࡾ֯ܗɿ৭ۭؒͷ৭Ҭ
    65
    

    View Slide

66. ৭ͷ࿩͸೉͍͠ʂ
    ࢲͨͪΛ೰·ͤΔ৭ͷ೉͍͠࿩
    ▸ ΠϥϨʹiPhoneͷεΫγϣΛ഑ஔͨ͠ΒϠόΠ৭ʹͳͬͨ
    ॿ͚ͯʂ
    ▸ HIG Colorʹࡌ͍ͬͯΔṖͷ೒৭ը૾͸Կऀʁ
    ▸ ৭֮ҟৗͷํ͸Կ৭ͷ۠ผ͕ۤखͳΜ͚ͩͬ……ʁ
    ▸ ͰɺίϯτϥετൺͬͯԿͰ͚ͨͬ͠ʁ
    ▸ μʔΫϞʔυ͍ͬͯ͏ͷ͕࠷ۙͷྲྀߦΓͳͷʁͳΜͰʁ
    66
    

    View Slide

67. View Slide

68. ΋ͷͷݟ͑ํʹ͸

    ݸਓ͕ࠩ͋Γ·͢
    68
    

    View Slide

69. https://www.w3.org/TR/WCAG21/
    

    View Slide

70. https://www.w3.org/TR/low-vision-needs/
    

    View Slide

71. ΋ͷͷݟ͑ํʹ͸ݸਓ͕ࠩ͋Γ·͢
    ߟྀ͢΂͖ࢹ֮ಛੑ͍Ζ͍Ζ
    ▸ ৭֮ / Color vision
    ▸ ίϯτϥετײ౓ / Contrast sensitivity
    ▸ ࢹ֮աහ / Light sensitivity, Photophobia
    ▸ ࢹྗ / Visual acuity
    ▸ ࢹ໺ / Field of vision
    71
    https://www.w3.org/TR/low-vision-needs/
    

    View Slide

72. ΋ͷͷݟ͑ํʹ͸ݸਓ͕ࠩ͋Γ·͢
    ߟྀ͢΂͖ࢹ֮ಛੑ͍Ζ͍Ζ
    ▸ ৭֮ / Color vision
    ▸ ίϯτϥετײ౓ / Contrast sensitivity
    ▸ ࢹ֮աහ / Light sensitivity, Photophobia
    ▸ ࢹྗ / Visual acuity
    ▸ ࢹ໺ / Field of vision
    72
    https://www.w3.org/TR/low-vision-needs/
    

    View Slide

73. ؾΛ͚ͭΔ͜ͱͦͷ̍
    ৭֮ʮҟৗʯͬͯʁ
    73
    

    View Slide

74. ৭֮ʮҟৗʯͬͯʁ
    ʮ৭ͷݟ͑ํ͕ଞͷଟ͘ͷਓͱҟͳΔঢ়ଶʯ
    ▸ ৭໡ɺ৭ऑ
    ▸ ෆਖ਼͔֬ͭࠩผతͳͨΊ࢖ΘΕͳ͘ͳͬͨ
    ▸ ৭֮ҟৗ ೔ຊҩֶձɺ2005ʙ
    ▸ ৭֮ଟ༷ੑ ೔ຊҨ఻ֶձɺ2017ʙ
    ▸ ੜ෺ֶతʹ͸ҟৗͰ͸ͳ͘ଟ༷ੑͰ͋Δ
    74
    

    View Slide

75. ৭֮ʮҟৗʯͬͯʁ
    ৭֮ҟৗͷݪҼ͸͍Ζ͍Ζ
    ▸ ઌఱੑ৭֮ҟৗʢஉੑ4.5%ʙ10%ɺঁੑ0.2%ʙ0.4%ʣ
    ▸ Lਲ਼ମػೳෆશʹΑΔ΋ͷʢ1ܕ৭֮ / Protanopiaʣ
    ▸ Mਲ਼ମػೳෆશʹΑΔ΋ͷʢ2ܕ৭֮ / Deuteranopiaʣ
    ▸ Sਲ਼ମػೳෆશʹΑΔ΋ͷʢ3ܕ৭֮ / Tritanopiaʣʢඇৗʹ·Εʣ
    ▸ ޙఱੑ৭֮ҟৗ
    ▸ ؟࣬ױʹΑΔ΋ͷ
    ▸ த਻ਆܦܥ࣬ױʹΑΔ΋ͷ
    ▸ ΄͔͍Ζ͍Ζ
    75
    

    View Slide

76. ৭֮ʮҟৗʯͬͯʁ
    ઌఱੑ৭֮ҟৗ - ਲ਼ମͱછ৭ମ
    ▸ Lਲ਼ମͱMਲ਼ମʹҟৗ͕ൃੜ͢Δͱ͖
    ▸ ੺৭ͱ྘৭ͷ۠ผ͕೉͘͠ͳΔ
    ▸ Xછ৭ମ্Ͱྡಉ࢜ʹฒΜͰ͍ΔͨΊɺෆ౳ަ伹͠΍͍͢
    ▸ ൐ੑજੑҨ఻Λ͢ΔͨΊɺஉੑͷํ͕ස౓͕ߴ͍
    ▸ Sਲ਼ମʹҟৗ͕ൃੜ͢Δͱ͖
    ▸ ੨৭ͱԫ৭ͷ۠ผ͕೉͘͠ͳΔ
    ▸ ৗછ৭ମ্ͰݦੑҨ఻Λ͢Δ͕ස౓͸ͱͯ΋গͳ͍
    76
    

    View Slide

77. ৭֮ʮҟৗʯͬͯʁ
    ޙఱత৭֮ҟৗͷ۩ମྫ
    ▸ ന಺োͰਫথମ͕ԫ৭͘ม৭͢Δ
    ▸ ੨৭͕໢ບʹಧ͖ʹ͘͘ͳΔ
    ▸ ؟࣬ױͰਲ਼ମࡉ๔͕ӨڹΛड͚Δ
    ▸ ಛʹSਲ਼ମ͔Β
    ▸ ೴࣬ױͰ৭ͷ൑ผ͕Ͱ͖ͳ͘ͳΔ
    ▸ നࠇͷੈքʹͳͬͯ͠·͏ͳͲ
    77
    

    View Slide

78. ৭֮ʮҟৗʯͬͯʁ
    ۤखͳ৭ͷ૊Έ߹Θͤ
    ▸ ੺྘৭֮ҟৗʢ1ܕɺ2ܕʣ
    ▸ தؒʙ௕͍೾௕ͷ৭͕ۤख
    ▸ ੨ԫ৭֮ҟৗʢ3ܕʣ
    ▸ ୹͍೾௕ͷ৭͕ۤख
    78
    https://commons.wikimedia.org/wiki/File:Cone-response-en.png
    

    View Slide

79. ৭֮ʮҟৗʯͬͯʁ
    ৭֮γϛϡϨʔλ
    79
    https://commons.wikimedia.org/wiki/File:Linear_visible_spectrum.svg

    https://www.color-blindness.com/coblis-color-blindness-simulator/ ΑΓ࡞੒
    ਖ਼ৗ
    1ܕ
    2ܕ
    3ܕ
    

    View Slide

80. ৭֮ҟৗͷํ͸

    Կ৭ͷ۠ผ͕ۤख

    ͳΜ͚ͩͬ……ʁ
    80
    

    View Slide

81. ৭֮ҟৗͷํ͸Կ৭ͷ۠ผ͕ۤखͳΜ͚ͩͬ……ʁ
    ৭֮ҟৗͷํ͸Կ৭ͷ۠ผ͕ۤखͳΜ͚ͩͬ……ʁ
    ▸ ৭֮ҟৗͷݪҼ΍ఔ౓ʹΑͬͯҟͳΔ
    ▸ ೔ৗੜ׆ʹࢧো͕ͳ͍ਓ΋͍Δʢଟ༷ੑͷ1ͭͱߟ͑ΒΕΔʣ
    ▸ ݈ৗऀͰ΋ಉ͡৭ͷݟ͑ํΛ͢Δͱ͸ݶΒͳ͍
    ▸ ৭Ͱ͔۠͠ผͰ͖ͳ͍UI΍άϥϑʹ͠ͳ͍
    ▸ ܗঢ়ͷҧ͍΍ృΓͭͿ͠ͷ༗ແͳͲΛซ༻ͯ͠Θ͔Γ΍͘͢͢Δ
    ▸ ϢχόʔαϧΧϥʔͱݺ͹ΕΔΧϥʔηοτΛ࢖͏ͷ΋ΞϦ
    81
    

    View Slide

82. ৭֮ҟৗͷํ͸Կ৭ͷ۠ผ͕ۤखͳΜ͚ͩͬ……ʁ
    ·ͣ͸੺྘৭֮ҟৗͰ΋Θ͔Γ΍͍͢৭࢖͍͔Β
    ▸ ஆ৭ܥͱפ৭ܥ͔Β৭ΛબΜͰ࢖͏
    ▸ ੺ͱԫ྘ɺ੨ͱࢵͷΑ͏ͳ૊Έ߹Θͤ͸NG
    ▸ ೱ͍੺ͱࠇΛ૊Έ߹ΘͤΔͷ΋NG
    ▸ എܠ৭ͱจࣈ৭ʹίϯτϥετͷࠩΛ͚ͭΔ
    ▸ നͰԑऔΓΛ͢Δ
    82
    

    View Slide

83. ৭ͷݟ͑ํʹ͸ݸਓ͕ࠩ͋Γ·͢
    ৭֮γϛϡϨʔλʢ࠶ܝʣ
    83
    https://commons.wikimedia.org/wiki/File:Linear_visible_spectrum.svg

    https://www.color-blindness.com/coblis-color-blindness-simulator/ ΑΓ࡞੒
    ਖ਼ৗ
    1ܕ
    2ܕ
    3ܕ
    

    View Slide

84. ৭֮ҟৗͷํ͸Կ৭ͷ۠ผ͕ۤखͳΜ͚ͩͬ……ʁ
    iPhoneͱMacΛάϨʔεέʔϧԽͯ͠ΈΔ
    ▸ ৭ͷ৘ใ͕ͳͯ͘΋ཧղͰ͖Δ͔Ͳ͏͔֬ೝ
    ▸ XcodeɿOverride Environments > Accessibility
    ▸ iPhoneɿSettings > Accessibility > Display Accommodations >
    Color Filters
    ▸ MacɿSystem Preferences > Accessibility > Use grayscale
    84
    

    View Slide

85. ৭֮ҟৗͷํ͸Կ৭ͷ۠ผ͕ۤखͳΜ͚ͩͬ……ʁ
    xy৭౓ਤ͔Βۤखͳ৭ΛݟΔ
    ▸ ࠞಉ৭ઢɿxy৭౓ਤʹ͓͍ͯɺࠞಉ৭͸௚ઢ্ʹଘࡏ͢Δ
    85
    1ܕ৭֮ҟৗͷࠞಉ৭ઢ
    https://commons.wikimedia.org/wiki/File:CIE1931xy_blank.svg
    

    View Slide

86. ৭ͷ࿩͸೉͍͠ʂ
    ࢲͨͪΛ೰·ͤΔ৭ͷ೉͍͠࿩
    ▸ ΠϥϨʹiPhoneͷεΫγϣΛ഑ஔͨ͠ΒϠόΠ৭ʹͳͬͨ
    ॿ͚ͯʂ
    ▸ HIG Colorʹࡌ͍ͬͯΔṖͷ೒৭ը૾͸Կऀʁ
    ▸ ৭֮ҟৗͷํ͸Կ৭ͷ۠ผ͕ۤखͳΜ͚ͩͬ……ʁ
    ▸ ͰɺίϯτϥετൺͬͯԿͰ͚ͨͬ͠ʁ
    ▸ μʔΫϞʔυ͍ͬͯ͏ͷ͕࠷ۙͷྲྀߦΓͳͷʁͳΜͰʁ
    86
    

    View Slide

87. ؾΛ͚ͭΔ͜ͱͦͷ̎
    ίϯτϥετɺ

    ײ౓ʁ
    87
    

    View Slide

88. ίϯτϥετɺײ౓ʁ
    ͦ΋ͦ΋ίϯτϥετͬͯʁ
    ▸ ৭ɾτʔϯɾܗͳͲͷࠩҧͷ͜ͱͰɺࢹ֮ޮՌɺσβΠϯɺ
    ΠϝʔδͳͲʹ໾ཱͯΒΕΔ΋ͷɻࢹ֮తͳಛ௃ͷࠩɻ

    by Wikipedia
    88
    https://ja.wikipedia.org/wiki/
    %E3%82%B3%E3%83%B3%E3%83%88%E3%83%A9%E3%82%B9%E3%83%88
    

    View Slide

89. ίϯτϥετɺײ౓ʁ
    ίϯτϥετײ౓
    ▸ ബ͍จࣈɺബ͍ࣶ໛༷ΛೝࣝͰ͖Δ͔Ͳ͏͔ͷ౓߹͍
    ▸ ന಺োͳͲͰ௿Լ͢Δ͜ͱ͕͋Δ
    ▸ ద੾ͳจࣈαΠζ΍ίϯτϥετൺʹ͢Δඞཁ͕͋Δ
    89
    E E E E E E E E E E E
    

    View Slide

90. ίϯτϥετɺײ౓ʁ
    WCAGͷ໨ඪϨϕϧ
    ▸ ϨϕϧAʢ࠷খɺΏΔ͍໨ඪʣ
    ▸ ϨϕϧAA
    ▸ ϨϕϧAAAʢݫ͍͠໨ඪʣ
    ▸ ͜ΕΛgeneral policyʹ͢Δͷ͸Φεεϝ͞Ε͍ͯͳ͍
    90
    

    View Slide

91. ίϯτϥετɺײ౓ʁ
    ίϯτϥετײ౓ʹ͓͚Δ໨ඪ
    ▸ ϨϕϧAA
    ▸ 17ptະຬ͸4.5 : 1Ҏ্ʹ͢Δ
    ▸ 14ptҎ্ͷଠࣈͱ18ptҎ্͸3 : 1
    ▸ ϨϕϧAAA
    ▸ 7 : 1Ҏ্ʹ͢Δ
    ▸ 14ptҎ্ͷଠࣈͱ18ptҎ্͸4.5 : 1
    91
    

    View Slide

92. View Slide

93. 93
    Yً͕౓୲౰ʹͳΔΑ͏ʹௐ੔
    

    View Slide

94. ίϯτϥετɺײ౓ʁ
    ίϯτϥετൺͷܭࢉखॱ
    1. ΨϯϚิਖ਼͕͔͔͍ͬͯΔͷͰઢܗʹ໭͢
    2. XYZද৭ܥʹ͓͚ΔYͷ஋Λܭࢉ͢Δ
    3. σΟεϓϨΠ͔Βͷ൓ࣹޫͷӨڹΛՃ͑ͯൺ཰Λग़͢
    94
    

    View Slide

95. ίϯτϥετɺײ౓ʁ
    sRGB৭ۭؒʹ͓͚Δίϯτϥετൺͷఆٛ
    1. ઢܗRGBʹ͢Δ
    2. RGB͔Βܹࢗ஋YΛग़͢
    3. ϑϨΞ / Typical Viewing FlareΛߟྀͯ͠ൺ཰Λग़͢
    95
    RsRGB
    ≤ 0.03928 R =
    RsRGB
    12.92
    R = (
    RsRGB
    + 0.055
    1.055 )
    2.4
    L = 0.2126R + 0.7152G + 0.0722B
    L1
    + 0.05
    L2
    + 0.05
    if then else
    

    View Slide

96. Ͱɺ

    ίϯτϥετൺͬͯ
    ԿͰ͚ͨͬ͠ʁ
    96
    

    View Slide

97. ͰɺίϯτϥετൺͬͯԿͰ͚ͨͬ͠ʁ
    ͰɺίϯτϥετൺͬͯԿͰ͚ͨͬ͠ʁ
    ▸ े෼ͳίϯτϥετൺ͕ͳ͍ͱಡΈͮΒ͘ͳΔ
    ▸ എܠ৭ͱจࣈ৭ͷ໌Δ͞۩߹͕ಉ͡ʹͳΒͳ͍Α͏ʹ͢Δ
    ▸ μʔΫϞʔυ༻ͷσβΠϯ΋ܭࢉ͓ͯ͘͠
    ▸ ίϯτϥετൺͷܭࢉࣜʹ͸ͪΌΜͱҙຯ͕͋Δ
    ▸ άάͬͯग़ͯ͘Δܭࢉπʔϧ͕ศརʂ
    ▸ ୡ੒ϨϕϧʹΑͬͯ໨ඪ஋͸ҟͳΔ
    ▸ ·ͣ͸4.5 : 1Λ໨ࢦͯ͠ؤுΔ
    97
    

    View Slide

98. ৭ͷ࿩͸೉͍͠ʂ
    ࢲͨͪΛ೰·ͤΔ৭ͷ೉͍͠࿩
    ▸ ΠϥϨʹiPhoneͷεΫγϣΛ഑ஔͨ͠ΒϠόΠ৭ʹͳͬͨ
    ॿ͚ͯʂ
    ▸ HIG Colorʹࡌ͍ͬͯΔṖͷ೒৭ը૾͸Կऀʁ
    ▸ ৭֮ҟৗͷํ͸Կ৭ͷ۠ผ͕ۤखͳΜ͚ͩͬ……ʁ
    ▸ ͰɺίϯτϥετൺͬͯԿͰ͚ͨͬ͠ʁ
    ▸ μʔΫϞʔυ͍ͬͯ͏ͷ͕࠷ۙͷྲྀߦΓͳͷʁͳΜͰʁ
    98
    

    View Slide

99. ؾΛ͚ͭΔ͜ͱͦͷ̏
    ࢹ͕֮աහʁ
    99
    

    View Slide

100. ࢹ͕֮աහʁ
     ࢹ֮աහͱ͸
     ▸ ໌Δ͍ޫΛݟΔͱ໨΍಄͕௧͘ͳΔ
     ▸ υϥΠΞΠɺന಺োͳͲͷ؟࣬ױ
     ▸ ൃୡো֐ʹΑΔײ֮աහ
     ▸ ͳͲͳͲ
     ▸ ݈ৗऀͰ΋໌Δ͍৭Λݟଓ͚Δͱ໨͕ർΕ΍͍͢Έ͍ͨ
     100
     ↓
     ҉͍৭ͷσβΠϯͰରॲʂ
     

     View Slide

101. 101
     https://togetter.com/li/1366138, https://togetter.com/li/1368113
     

     View Slide

102. ࢹ͕֮աහʁ
     iPhoneͰͰ͖ΔσΟεϓϨΠௐ੔
     ▸ ΧϥʔϑΟϧλʔΛઃఆ͢Δ
     ▸ ϕʔδϡ΍྘ͳͲ͓޷Έͷ৭߹͍ʹͰ͖Δ
     ▸ ʢ৭֮ҟৗͷਓ޲͚ͷઃఆ΋͋Δʣ
     ▸ ৭Λ൓స͢Δ
     ▸ େ఍ͷΞϓϦ͸നഎܠͳͷͰɺ൓స͢Ε͹ࠇ͘ͳΔ
     ▸ μʔΫϞʔυʹ͢Δ
     102
     

     View Slide

103. 103
     ௨ৗ ಠࣗDark Mode
     Smart Invert
     

     View Slide

104. μʔΫϞʔυ

     ͍ͬͯ͏ͷ͕࠷ۙͷ

     ྲྀߦΓͳͷʁͳΜͰʁ
     104
     

     View Slide

105. μʔΫϞʔυ͍ͬͯ͏ͷ͕࠷ۙͷྲྀߦΓͳͷʁͳΜͰʁ
     μʔΫϞʔυͷϝϦοτ
     ▸ ໨ʹ༏͍͠
     ▸ ʮ৭Λ൓సʯͱҧ͍ɺҙਤ͠ͳ͍৭ʹ͞ΕͣʹࡁΉ
     ▸ Smart InvertͰ͋ͬͯ΋ը૾͸ແࣄ
     ▸ μʔΫϞʔυͳΒίʔϙϨʔτΧϥʔΛकΕΔ
     ▸ όοςϦʔফඅྔΛ࡟ݮͰ͖Δ
     ▸ OLEDͷΈ
     105
     

     View Slide

106. μʔΫϞʔυ͍ͬͯ͏ͷ͕࠷ۙͷྲྀߦΓͳͷʁͳΜͰʁ
     σΟεϓϨΠͷछྨ
     ▸ ӷথσΟεϓϨΠ
     ▸ डޫܕʢόοΫϥΠτ͋Γʣ
     ▸ iPhone XR͸ʮLiquid Retina HDσΟεϓϨΠʯʮIPSςΫϊϩ
     δʔ౥ࡌʯ
     ▸ ༗ػELσΟεϓϨΠ
     ▸ ࣗൃޫܕʢόοΫϥΠτͳ͠ʣ
     ▸ iPhone XS͸ʮSuper Retina HDσΟεϓϨΠʯʮOLEDʯ
     106
     

     View Slide

107. μʔΫϞʔυ͍ͬͯ͏ͷ͕࠷ۙͷྲྀߦΓͳͷʁͳΜͰʁ
     ന৭ͱࠇ৭Λදࣔͨ͠ͱ͖
     107
     ӷথσΟεϓϨΠ
     ༗ػELσΟεϓϨΠ
     όοΫϥΠτ
     ӷথͷΧʔςϯ
     ന৭ ࠇ৭
     

     View Slide

108. 108
     ৭൓స && μʔΫϞʔυ → ʁʁʁ
     

     View Slide

109. View Slide

110. μʔΫϞʔυ͍ͬͯ͏ͷ͕࠷ۙͷྲྀߦΓͳͷʁͳΜͰʁ
     ྆ํͷػೳΛ࢖ͬͨ࣌ͷڍಈ
     ▸ μʔΫϞʔυͱ৭൓స͕߹Θͬͯ͞ന͘ͳΔ
     ▸ Slack.app

     ▸ ৭൓సΛແޮʹͯ͠μʔΫϞʔυσβΠϯΛҡ࣋
     ▸ Twitter.appɺYouTube.app
     ▸ var accessibilityIgnoresInvertColors: Bool { get set }
     110
     

     View Slide

111. ৭ͷ࿩͸೉͍͠ʂ
     ࢲͨͪΛ೰·ͤΔ৭ͷ೉͍͠࿩
     ▸ ΠϥϨʹiPhoneͷεΫγϣΛ഑ஔͨ͠ΒϠόΠ৭ʹͳͬͨ
     ॿ͚ͯʂ
     ▸ HIG Colorʹࡌ͍ͬͯΔṖͷ೒৭ը૾͸Կऀʁ
     ▸ ৭֮ҟৗͷํ͸Կ৭ͷ۠ผ͕ۤखͳΜ͚ͩͬ……ʁ
     ▸ ͰɺίϯτϥετൺͬͯԿͰ͚ͨͬ͠ʁ
     ▸ μʔΫϞʔυ͍ͬͯ͏ͷ͕࠷ۙͷྲྀߦΓͳͷʁͳΜͰʁ
     111
     

     View Slide

112. 112
     :done:
     ࠓ౓ͦ͜
     

     View Slide

113. ৭ͷ೉͍͠࿩ʹෛ͚ͳ͍ମͮ͘Γ60෼
     ఻͔͑ͨͬͨ͜ͱ
     ▸ XYZද৭ܥ΍sRGB৭ۭؒͷ஌ࣝΛ͚͓ͭͯ͘ͱɺ

     ָʹυΩϡϝϯτ͕ಡΊΔΑ͏ʹͳΔΑ
     ▸ ݟ͑΍͢͞ɺݟ͑ʹ͘͞͸ਓͦΕͧΕ
     ▸ ඞཁͳਓ͕͍Δͱཧղ͢Ε͹Ϟνϕ্͕͕Δؾ͕͢Δ
     ▸ μʔΫϞʔυରԠɺ΍͍ͬͯ͜͏ͳ
     113
     

     View Slide

114. ࢀߟจݙͱ͔
     114
     

     View Slide

115. ࢀߟจݙͱ͔
     ΠϥϨͱ৭ਂ౓
     ▸ ৭ਂ౓ͱ͸ - IT༻ޠࣙయ e-Words
     ▸ RGB Ϗοτਂ౓ͷ͏Μͪ͘ (લฤ) ʙ લఏ஌ࣝ - Qiita
     ▸ Why are the colors of certain PNG files getting distorted when opened in Illustrator? - Graphic Design Stack
     Exchange
     115
     

     View Slide

116. ࢀߟจݙͱ͔
     ΨΠυϥΠϯྨ
     ▸ Color and Contrast - Accessibility - Human Interface Guidelines - Apple Developer
     ▸ Color - Visual Design - iOS - Human Interface Guidelines - Apple Developer
     ▸ Make apps more accessible | Android Developers
     ▸ Web Content Accessibility Guidelines (WCAG) 2.0
     ▸ Understanding Success Criterion 1.4.3 | Understanding WCAG 2.0
     ▸ Accessibility Requirements for People with Low Vision
     116
     

     View Slide

117. ࢀߟจݙͱ͔
     ࠞ৭ͱද৭ܥͱ৭֮ͱଞ͍Ζ͍Ζ
     ▸ ೔ຊ৭࠼ֶձฤʢ2011ʣʰ৽ฤɹ৭࠼ՊֶϋϯυϒοΫɹୈ3൛ʱ౦ژେֶग़൛ձ
     ▸ Ճ๏ࠞ৭ - ͔΄͏͜Μ͠ΐ͘ | ෢ଂ໺ඒज़େֶ ଄ܗϑΝΠϧ
     ▸ ޫͱ৭ͷ࿩ ୈҰ෦ʛςΫχΧϧΨΠυɾίϥϜʛCCSɿγʔγʔΤεגࣜձࣾ
     ▸ ༻ޠू
     ▸ XYZද৭ܥʛ৭ͷදΘ͠ํʛDIC Color Design, Inc.
     ▸ XYZ৭ۭؒʹഭΔ(2) - Qiita
     ▸ ৭ͷ਺஋Խʹ͸ɺද৭ܥΛ࢖༻͠·͢ɻ1-ֶָ͘͠΂Δ஌ܙା | ίχΧϛϊϧλ
     117
     

     View Slide

118. ࢀߟจݙͱ͔
     ΧϥʔϚωδϝϯτ
     ▸ ৭ۭؒ - ө૾৘ใϝσΟΞֶձ
     ▸ sRGB
     ▸ σδλϧөըͷΧϥʔϚωδϝϯτ - ౦ژࠃཱۙ୅ඒज़ؗ
     ▸ ୈ7ճ "ۂઢඒ"͕৭࠶ݱੑͷܾΊखʹͳΔʁʕʕӷথσΟεϓϨΠͷʮΨϯϚʯΛ஌Ζ͏ | EIZOגࣜձࣾ
     ▸ ෺ཧϕʔεϨϯμϦϯά -ϦχΞϫʔΫϑϩʔฤ (1)- | Cygames Engineers' Blog
     ▸ ΨϯϚิਖ਼ͷ͏Μͪ͘ - Qiita
     118
     

     View Slide

119. ࢀߟจݙͱ͔
     ৭֮ҟৗ
     ▸ ೔ຊҩֶձ ҩֶ༻ޠࣙయ WEB൛ɿ੔ཧ͞Εͨ༻ޠʻ৭֮ؔ࿈༻ޠʹ͍ͭͯʼ
     ▸ ʮ༏ੑʯʮྼੑʯ༻ޠ࢖Θͣɹ೔ຊҨ఻ֶձ͕ݴ͍׵͑ɹɹ:೔ຊܦࡁ৽ฉ
     ▸ ৭֮ݕࠪද ংจ – ެӹࡒஂ๏ਓ Ұ৽ձ
     ▸ ͜Εͬͯݟؒҧ͍ʁ໨ͷҟৗ͕Ҿ͖ى͜͢େࣄ݅ - NHK Ψοςϯʂ
     ▸ 2.৭֮ো֐ऀͷ࣮ଶͷ೺Ѳ
     ▸ ৭֮ҟৗҨ఻ࢠͷݚڀʛ࣎լҩՊେֶɹ؟Պֶߨ࠲
     ▸ ৭֮ҟৗ - ໨ͷපؾඦՊʛࢀఱ੡ༀ
     ▸ ྆ଆޙ಄༿පมʹΑΔେ೴ੑ৭֮ো֐ͷ1ྫ - J-Stage
     ▸ ΧϥʔϢχόʔαϧσβΠϯͷͨΊͷ৭ऑγϛϡϨʔγϣϯ
     ▸ ৭֮ͷଟ༷ੑͱࢹ֮όϦΞϑϦʔͳϓϨθϯςʔγϣϯ
     119
     

     View Slide

120. ࢀߟจݙͱ͔
     ϢχόʔαϧσβΠϯͱ͔
     120
     ▸ ΧϥʔϢχόʔαϧσβΠϯਪ঑഑৭ηοτ
     ▸ ౦ژ౎ΧϥʔϢχόʔαϧσβΠϯΨΠυϥΠϯ
     ▸ ҆શ৭ٴͼ҆શඪࣝʹؔ͢Δ JIS վਖ਼
     ▸ ҩֶੜ෺ֶऀ޲͖ ৭໡ͷਓʹ΋Θ͔ΔόϦΞϑϦʔϓϨθϯςʔγϣϯ๏
     ▸ ͔Θ͍͍ϑϦʔૉࡐू ͍Β͢ͱ΍
     ▸ ʰ͍Β͢ͱ΍ʱͷૉࡐΛ৭֮ো͕͍ͷࢹ఺͔ΒݟͯΈͨ | ͘Ζͻͭ͡ͷϝϞா
     

     View Slide

121. ࢀߟจݙͱ͔
     ίϯτϥετ
     ▸ ίϯτϥετൺͱ͸ - IT༻ޠࣙయ e-Words
     ▸ ίϯτϥετײ౓ݕࠪ – य़೔Ҫࢢɾখ຀ࢢͷ؟ՊͳΒฏా؟Պ
     ▸ ίϯτϥετײ౓ଌఆɾάϨΞݕࠪ | ͖͘ͳ౬ా؟Պ ެࣜαΠτ
     ▸ Understanding Success Criterion 1.4.3 | Understanding WCAG 2.0
     ▸ A close look at the sRGB formula
     ▸ A Standard Default Color Space for the Internet - sRGB
     ▸ E: Viewing Flare - Digital Color Management - Wiley Online Library
     121
     

     View Slide

122. ࢀߟจݙͱ͔
     ࢹ֮աහͱμʔΫϞʔυͱ৭൓స
     ▸ ࢹ͕֮աහʮޫʯʮ৭ʯ͕ετϨεɿࠔΓ͝ͱͷτϦηπʢऔѻઆ໌ॻʣʛൃୡো֐ϓϩδΣΫτ
     ▸ ᠤ໌ʢ·Ϳ͠͞ʣɿΑ͋͘Δ؟Պ࣬ױͷղઆ | ͭͭΈ؟ՊΫϦχοΫʢ࿅അ۠ʣ
     ▸ accessibilityIgnoresInvertColors - UIView | Apple Developer Documentation
     ▸ iPhone XR - ࢓༷ - Appleʢ೔ຊʣ
     ▸ iPhone XS - ࢓༷ - Appleʢ೔ຊʣ
     ▸ ୈ4ճ TNʁVAʁIPSʁᴷᴷӷথύωϧۦಈํࣜͷ࢓૊Έͱಛ௃Λ஌Ζ͏ | EIZOגࣜձࣾ
     ▸ ͍·͞Βฉ͚ͳ͍σδλϧٕज़ͷ࢓૊ΈΛղઆɿເͷബܕςϨϏɺେܕ༗ػEL (1/3) - EDN Japan
     ▸ ༗ػEL࣌୅ʹ͸ʮμʔΫϞʔυʯΛੵۃ࠾༻͢΂͖ᴷᴷGoogle͕։ൃऀʹݺͼ͔͚ - Engadget ೔ຊ൛
     122
     

     View Slide

123. ऴΘΓʂ
     

     View Slide