iOSDC Japan 2019 60 mins for color

by Shigure Shimotori

Slide 1

Slide 1 text

৭ͷ೉͍͠࿩ʹෛ͚ͳ͍  ମͮ͘Γ60෼ iOSDC Japan 2019

Slide 2

Slide 2 text

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

Slide 3

Slide 3 text

৭ͷ࿩͸೉͍͠ʂ 3

Slide 4

Slide 4 text

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

Slide 5

Slide 5 text

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

Slide 6

Slide 6 text

Slide 7

Slide 7 text

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

Slide 8

Slide 8 text

Slide 9

Slide 9 text

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

Slide 10

Slide 10 text

෮शɾ  ޫͷࡾݪ৭ͱUIColor 10

Slide 11

Slide 11 text

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

Slide 12

Slide 12 text

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

Slide 13

Slide 13 text

෮शɾޫͷࡾݪ৭ͱUIColor RGBίϯϙʔωϯτ஋Ͱ৭Λࢦఆ ▸ ੺ & ྘ & ੨ͷͦΕͧΕʹ0.0ʙ1.0ͷ஋Λ༩͑ͯࢦఆ ▸ υΩϡϝϯτʹ͸΋ͬͱ͍ΖΜͳ͜ͱ͕ॻ͍ͯ͋Δ͕  ςΩτʔʹ࢖͑Δ 13 ྩ࿨ - കɹ#EAADBD UIColor(red: 234/255, green: 173/255, blue: 189/255, alpha: 1)

Slide 14

Slide 14 text

ΠϥϨʹiPhoneͷ  εΫγϣΛ഑ஔͨ͠Β  Ϡό͍৭ʹͳͬͨ  ॿ͚ͯʂ 14 ※ΠϥϨ = Adobe Illustrator

Slide 15

Slide 15 text

Slide 16

Slide 16 text

Slide 17

Slide 17 text

Slide 18

Slide 18 text

Slide 19

Slide 19 text

Slide 20

Slide 20 text

Slide 21

Slide 21 text

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

Slide 22

Slide 22 text

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

Slide 23

Slide 23 text

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

Slide 24

Slide 24 text

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

Slide 25

Slide 25 text

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

Slide 26

Slide 26 text

No content

Slide 27

Slide 27 text

No content

Slide 28

Slide 28 text

Slide 29

Slide 29 text

ΠϥϨʹiPhoneͷεΫγϣΛ഑ஔͨ͠ΒϠό͍৭ʹͳͬͨॿ͚ͯʂ ʮiPhone͸48bppରԠͳΜͩΑʂʯ ▸ When appropriate, use the Display P3 color proﬁle 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/

Slide 30

Slide 30 text

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

Slide 31

Slide 31 text

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

Slide 32

Slide 32 text

32 :done: ……ϚδͰʁ

Slide 33

Slide 33 text

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

Slide 34

Slide 34 text

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

Slide 35

Slide 35 text

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

Slide 36

Slide 36 text

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

Slide 37

Slide 37 text

෮शɾޫͷࡾݪ৭ͱUIColor ਓͷ໨Λὃͯ͠৭Λ࡞Δ ▸ ਲ਼ମࡉ๔͸ͲΜͳ৭Λ૊Έ߹Θ͔ͤͨΛݟഁΕͳ͍  ˠ গͳ͍৭਺Ͱ͞·͟·ͳ৭Λೝࣝͤ͞Δ͜ͱ͕Ͱ͖Δ 37 Y R G Sਲ਼ମ Mਲ਼ମ Lਲ਼ମ

Slide 38

Slide 38 text

෮शɾޫͷࡾݪ৭ͱUIColor ౳৭࣮ݧ ▸ ੺ɺ྘ɺ੨ͷ3৭Λࠞͥ߹Θͤɺࢦఆ͞Εͨ୯৭ޫͱ  ಉ͡৭Λ࡞Δ ▸ ੺ɿ700.0nmɺ྘ɿ546.1nmɺ੨ɿ435.8nm 38 ԫ৭׬੒ʂ Έ΄Μ

Slide 39

Slide 39 text

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

Slide 40

Slide 40 text

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

Slide 41

Slide 41 text

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

Slide 42

Slide 42 text

XYZͷੈք΁Α͏ͦ͜ʂ 42

Slide 43

Slide 43 text

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

Slide 44

Slide 44 text

XYZͷੈք΁Α͏ͦ͜ʂ ܹࢗ஋Λ࢖ͬͯߟ͍͑ͯ͘ ▸ શͯͷ৭͸ܹࢗ஋ʢ3ͭͷ਺஋ͷ૊ʣͰදݱͰ͖Δ ▸ RGBܹࢗ஋Λ༻͍ΔͱɺҰ෦ͷ৭Λ͏·͘දݱͰ͖ͣʹ  ϚΠφεͷ஋ʹͳΔ͜ͱ͕͋Δ 44 ↓ ܭࢉ͠΍͍͢Α͏ͳܹࢗ஋ʹվ଄ͪ͠Ό͑ʂ

Slide 45

Slide 45 text

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

Slide 46

Slide 46 text

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

Slide 47

Slide 47 text

XYZͷੈք΁Α͏ͦ͜ʂ XYZܹࢗ஋Λར༻ͯ͢͠΂ͯͷ৭Λάϥϑʹ͢Δ ▸ 3ͭͷύϥϝʔλΛͦͷ··ࡾ࣍ݩάϥϑʹϓϩοτ ▸ ʮͲͷ͘Β͍ͷൺ཰Ͱ৭Λࠞͥͯ࡞͔ͬͨʯͳΒ  ฏ໘Ͱ΋දݱͰ͖Δʢ xy৭౓ਤ ʣ ▸ 3࣍ݩάϥϑΛಡΉͷ͸೉͍͠ͷͰɺͪ͜Βͷํ͕ศར 47

Slide 48

Slide 48 text

XYZͷੈք΁Α͏ͦ͜ʂ xy৭౓ਤ ▸ ʢ΄΅ʣ͢΂ͯͷ৭Λࡌͤͨάϥϑ ▸ ໌Δ͞ͷҧ͏৭͸ࡌ͍ͬͯͳ͍ ▸ ࠲ඪΛݴ͑͹ਖ਼֬ʹ৭Λൺ΂ΒΕΔ ▸ σΟεϓϨΠ͕දࣔͰ͖Δ৭Λ  ࣔ͢ͷʹศར ▸ ୺ͷํͷ৭͸ਖ਼֬ʹදࣔͰ͖ͳ͍ 48 https://commons.wikimedia.org/wiki/File:CIE1931xy_blank.svg

Slide 49

Slide 49 text

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

Slide 50

Slide 50 text

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

Slide 51

Slide 51 text

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

Slide 52

Slide 52 text

No content

Slide 53

Slide 53 text

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

Slide 54

Slide 54 text

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

Slide 55

Slide 55 text

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

Slide 56

Slide 56 text

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

Slide 57

Slide 57 text

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

Slide 58

Slide 58 text

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

Slide 59

Slide 59 text

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 ͪΐͬͱ઱΍͔ʁ

Slide 60

Slide 60 text

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

Slide 61

Slide 61 text

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

Slide 62

Slide 62 text

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

Slide 63

Slide 63 text

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

Slide 64

Slide 64 text

HIG Colorʹࡌ͍ͬͯΔ  Ṗͷ೒৭ը૾͸Կऀʁ 64

Slide 65

Slide 65 text

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

Slide 66

Slide 66 text

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

Slide 67

Slide 67 text

No content

Slide 68

Slide 68 text

΋ͷͷݟ͑ํʹ͸  ݸਓ͕ࠩ͋Γ·͢ 68

Slide 69

Slide 69 text

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

Slide 70

Slide 70 text

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

Slide 71

Slide 71 text

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

Slide 72

Slide 72 text

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

Slide 73

Slide 73 text

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

Slide 74

Slide 74 text

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

Slide 75

Slide 75 text

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

Slide 76

Slide 76 text

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

Slide 77

Slide 77 text

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

Slide 78

Slide 78 text

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

Slide 79

Slide 79 text

৭֮ʮҟৗʯͬͯʁ ৭֮γϛϡϨʔλ 79 https://commons.wikimedia.org/wiki/File:Linear_visible_spectrum.svg  https://www.color-blindness.com/coblis-color-blindness-simulator/ ΑΓ࡞੒ ਖ਼ৗ 1ܕ 2ܕ 3ܕ

Slide 80

Slide 80 text

৭֮ҟৗͷํ͸  Կ৭ͷ۠ผ͕ۤख  ͳΜ͚ͩͬ……ʁ 80

Slide 81

Slide 81 text

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

Slide 82

Slide 82 text

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

Slide 83

Slide 83 text

৭ͷݟ͑ํʹ͸ݸਓ͕ࠩ͋Γ·͢ ৭֮γϛϡϨʔλʢ࠶ܝʣ 83 https://commons.wikimedia.org/wiki/File:Linear_visible_spectrum.svg  https://www.color-blindness.com/coblis-color-blindness-simulator/ ΑΓ࡞੒ ਖ਼ৗ 1ܕ 2ܕ 3ܕ

Slide 84

Slide 84 text

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

Slide 85

Slide 85 text

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

Slide 86

Slide 86 text

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

Slide 87

Slide 87 text

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

Slide 88

Slide 88 text

ίϯτϥετɺײ౓ʁ ͦ΋ͦ΋ίϯτϥετͬͯʁ ▸ ৭ɾτʔϯɾܗͳͲͷࠩҧͷ͜ͱͰɺࢹ֮ޮՌɺσβΠϯɺ ΠϝʔδͳͲʹ໾ཱͯΒΕΔ΋ͷɻࢹ֮తͳಛ௃ͷࠩɻ  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

Slide 89

Slide 89 text

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

Slide 90

Slide 90 text

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

Slide 91

Slide 91 text

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

Slide 92

Slide 92 text

Slide 93

Slide 93 text

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

Slide 94

Slide 94 text

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

Slide 95

Slide 95 text

ίϯτϥετɺײ౓ʁ 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

Slide 96

Slide 96 text

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

Slide 97

Slide 97 text

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

Slide 98

Slide 98 text

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

Slide 99

Slide 99 text

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

Slide 100

Slide 100 text

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

Slide 101

Slide 101 text

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

Slide 102

Slide 102 text

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

Slide 103

Slide 103 text

103 ௨ৗ ಠࣗDark Mode Smart Invert

Slide 104

Slide 104 text

μʔΫϞʔυ  ͍ͬͯ͏ͷ͕࠷ۙͷ  ྲྀߦΓͳͷʁͳΜͰʁ 104

Slide 105

Slide 105 text

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

Slide 106

Slide 106 text

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

Slide 107

Slide 107 text

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

Slide 108

Slide 108 text

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

Slide 109

Slide 109 text

109

Slide 110

Slide 110 text

μʔΫϞʔυ͍ͬͯ͏ͷ͕࠷ۙͷྲྀߦΓͳͷʁͳΜͰʁ ྆ํͷػೳΛ࢖ͬͨ࣌ͷڍಈ ▸ μʔΫϞʔυͱ৭൓స͕߹Θͬͯ͞ന͘ͳΔ ▸ Slack.app  ▸ ৭൓సΛແޮʹͯ͠μʔΫϞʔυσβΠϯΛҡ࣋ ▸ Twitter.appɺYouTube.app ▸ var accessibilityIgnoresInvertColors: Bool { get set } 110

Slide 111

Slide 111 text

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

Slide 112

Slide 112 text

112 :done: ࠓ౓ͦ͜

Slide 113

Slide 113 text

৭ͷ೉͍͠࿩ʹෛ͚ͳ͍ମͮ͘Γ60෼ ఻͔͑ͨͬͨ͜ͱ ▸ XYZද৭ܥ΍sRGB৭ۭؒͷ஌ࣝΛ͚͓ͭͯ͘ͱɺ  ָʹυΩϡϝϯτ͕ಡΊΔΑ͏ʹͳΔΑ ▸ ݟ͑΍͢͞ɺݟ͑ʹ͘͞͸ਓͦΕͧΕ ▸ ඞཁͳਓ͕͍Δͱཧղ͢Ε͹Ϟνϕ্͕͕Δؾ͕͢Δ ▸ μʔΫϞʔυରԠɺ΍͍ͬͯ͜͏ͳ 113

Slide 114

Slide 114 text

ࢀߟจݙͱ͔ 114

Slide 115

Slide 115 text

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

Slide 116

Slide 116 text

ࢀߟจݙͱ͔ ΨΠυϥΠϯྨ ▸ 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

Slide 117

Slide 117 text

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

Slide 118

Slide 118 text

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

Slide 119

Slide 119 text

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

Slide 120

Slide 120 text

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

Slide 121

Slide 121 text

ࢀߟจݙͱ͔ ίϯτϥετ ▸ ίϯτϥετൺͱ͸ - 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

Slide 122

Slide 122 text

ࢀߟจݙͱ͔ ࢹ֮աහͱμʔΫϞʔυͱ৭൓స ▸ ࢹ͕֮աහʮޫʯʮ৭ʯ͕ετϨεɿࠔΓ͝ͱͷτϦηπʢऔѻઆ໌ॻʣʛൃୡো֐ϓϩδΣΫτ ▸ ᠤ໌ʢ·Ϳ͠͞ʣɿΑ͋͘Δ؟Պ࣬ױͷղઆ | ͭͭΈ؟ՊΫϦχοΫʢ࿅അ۠ʣ ▸ 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

Slide 123

Slide 123 text

ऴΘΓʂ