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

iOSDC Japan 2019 60 mins for color

iOSDC Japan 2019 60 mins for color

Shigure Shimotori

September 06, 2019
Tweet

More Decks by Shigure Shimotori

Other Decks in Programming

Transcript

  1. 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
  2. 6

  3. 8

  4. 15

  5. 16

  6. 17

  7. 18

  8. 19

  9. 20

  10. ΠϥϨʹiPhoneͷεΫγϣΛ഑ஔͨ͠ΒϠό͍৭ʹͳͬͨॿ͚ͯʂ ৭ਂ౓ / color depth ▸ 1pixel͋ͨΓʹର͠ԿbitΛ༻͍ͯ৭Λදݱ͍ͯ͠Δ͔ ▸ 24bits per

    pixelͷͱ͖ͷ੺ͷΧϥʔίʔυ͸#FF0000 ▸ 48bits per pixelͷͱ͖ͷ੺ͷΧϥʔίʔυ͸#FFFF00000000 ▸ iPhoneͷσΟεϓϨΠ͸48bits per pixelରԠ ▸ දݱͰ͖Δ৭ͷ਺͸ͳΜͱ65536^3छʂ ▸ imagemagickͷidentifyͰௐ΂ΒΕΔ 23
  11. 28

  12. ΠϥϨʹ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/
  13. XYZͷੈք΁Α͏ͦ͜ʂ RGBܹࢗ஋Λվ଄ͯ͠XYZܹࢗ஋ʹ͢Δ ▸ XYZܹࢗ஋͸RGB൛ͷܹࢗ஋Λͪΐͬͱ͍͚ͬͨͩ͡ͷ΋ͷ ▸ ܭࢉ͠΍͍͢Α͏ʹௐ੔ ▸ Yً͕౓୲౰ʹͳΔΑ͏ʹௐ੔ ʲ௒ॏཁɾςετʹग़·͢ʳ ▸

    ྘৭͕1൪໌Δ͘ݟ͑ΔͷͰɺ࣮࣭྘৭ͷ୲౰Ͱ΋͋Δ ▸ Z͕୹೾௕ʢ੨৭ʣͷ୲౰ʹͳΔΑ͏ʹௐ੔ ▸ ͳͲͳͲ ▸ XYZܹࢗ஋Λ࢖ͬͯͦΕͧΕͷ৭ΛදݱʢXYZද৭ܥʣ 45
  14. XYZͷੈք΁Α͏ͦ͜ʂ ً౓ʁ໌౓ʁ ▸ ً౓ͱ໌౓͸ಉ͡͡Όͳ͍ʂ ▸ ً౓ / luminance ▸ ৺ཧ෺ཧྔ

    ▸ ໘ੵͰޫͷڧ͞Λׂͬͨ΋ͷ ▸ ໌౓ / brightness ▸ ৭ͷࡾଐੑͷ1ͭ ▸ RGBͷ஋͔ΒٻΊΔ 46
  15. 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
  16. XYZͷੈք΁Α͏ͦ͜ʂ ৭ۭؒ / color space ▸ σΟεϓϨΠ΍ϓϦϯλ͕ѻ͏৭ͷൣғ΍ํ๏Λࣔͨ͠΋ͷ ▸ ݪ৭ /

    primariesɿݪ৭͕ͦΕͧΕͲͷ৭͔ ▸ ৭Ҭ / color gamutɿѻ͑Δ৭ͷൣғ͸Ͳ͔͜ ▸ ΨϯϚ஋ / gamma transfer functionɿ໌Δ͞ʹؔ͢Δௐ੔۩߹ ▸ ͞·͟·ͳن͕֨͋Δ 50
  17. XYZͷੈք΁Α͏ͦ͜ʂ ΨϯϚ஋ / gamma transfer function ▸ ৭ʹͲͷ͘Β͍ͷิਖ਼ΛՃ͑Δ͔ ▸ ิਖ਼͕ՃΘ͍ͬͯͳ͍৭͸ઢܗ

    / linearͱݺ͹ΕΔ ▸ ݹ͘͸ϒϥ΢ϯ؅ʹΑΔ৭ͷมԽΛमਖ਼͢Δ΋ͷ ▸ ਓؒ͸໌Δ͍৭ΑΓ҉͍৭ͷํͷมԽʹහײ 51 ↓ ݟΔ؀ڥʹԠͨ͡ิਖ਼ΛՃ͑Δʂ
  18. XYZͷੈք΁Α͏ͦ͜ʂ sRGB৭ۭؒ / standard Red Green Blue ▸ IEC͕1998೥ʹ੍ఆͨ͠ن֨ ▸

    ౰࣌ͷΧϥʔCRTσΟεϓϨΠʢϒϥ΢ϯ؅ʣΛҙࣝͨ͠΋ͷ ▸ ఆ൪ɺΑ͘ݟΔ ▸ iPhone΋جຊతʹ͸͜ͷ৭ۭؒΛ࢖͏ 54
  19. 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
  20. 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 ͪΐͬͱ઱΍͔ʁ
  21. 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
  22. 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
  23. ΋ͷͷݟ͑ํʹ͸ݸਓ͕ࠩ͋Γ·͢ ߟྀ͢΂͖ࢹ֮ಛੑ͍Ζ͍Ζ ▸ ৭֮ / Color vision ▸ ίϯτϥετײ౓ /

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

    Contrast sensitivity ▸ ࢹ֮աහ / Light sensitivity, Photophobia ▸ ࢹྗ / Visual acuity ▸ ࢹ໺ / Field of vision 72 https://www.w3.org/TR/low-vision-needs/
  25. ৭֮ʮҟৗʯͬͯʁ ৭֮ҟৗͷݪҼ͸͍Ζ͍Ζ ▸ ઌఱੑ৭֮ҟৗʢஉੑ4.5%ʙ10%ɺঁੑ0.2%ʙ0.4%ʣ ▸ Lਲ਼ମػೳෆશʹΑΔ΋ͷʢ1ܕ৭֮ / Protanopiaʣ ▸ Mਲ਼ମػೳෆશʹΑΔ΋ͷʢ2ܕ৭֮

    / Deuteranopiaʣ ▸ Sਲ਼ମػೳෆશʹΑΔ΋ͷʢ3ܕ৭֮ / Tritanopiaʣʢඇৗʹ·Εʣ ▸ ޙఱੑ৭֮ҟৗ ▸ ؟࣬ױʹΑΔ΋ͷ ▸ த਻ਆܦܥ࣬ױʹΑΔ΋ͷ ▸ ΄͔͍Ζ͍Ζ 75
  26. ৭֮ʮҟৗʯͬͯʁ ઌఱੑ৭֮ҟৗ - ਲ਼ମͱછ৭ମ ▸ Lਲ਼ମͱMਲ਼ମʹҟৗ͕ൃੜ͢Δͱ͖ ▸ ੺৭ͱ྘৭ͷ۠ผ͕೉͘͠ͳΔ ▸ Xછ৭ମ্Ͱྡಉ࢜ʹฒΜͰ͍ΔͨΊɺෆ౳ަ伹͠΍͍͢

    ▸ ൐ੑજੑҨ఻Λ͢ΔͨΊɺஉੑͷํ͕ස౓͕ߴ͍ ▸ Sਲ਼ମʹҟৗ͕ൃੜ͢Δͱ͖ ▸ ੨৭ͱԫ৭ͷ۠ผ͕೉͘͠ͳΔ ▸ ৗછ৭ମ্ͰݦੑҨ఻Λ͢Δ͕ස౓͸ͱͯ΋গͳ͍ 76
  27. ৭֮ҟৗͷํ͸Կ৭ͷ۠ผ͕ۤखͳΜ͚ͩͬ……ʁ iPhoneͱMacΛάϨʔεέʔϧԽͯ͠ΈΔ ▸ ৭ͷ৘ใ͕ͳͯ͘΋ཧղͰ͖Δ͔Ͳ͏͔֬ೝ ▸ XcodeɿOverride Environments > Accessibility ▸

    iPhoneɿSettings > Accessibility > Display Accommodations > Color Filters ▸ MacɿSystem Preferences > Accessibility > Use grayscale 84
  28. 92

  29. ίϯτϥετɺײ౓ʁ 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
  30. μʔΫϞʔυ͍ͬͯ͏ͷ͕࠷ۙͷྲྀߦΓͳͷʁͳΜͰʁ σΟεϓϨΠͷछྨ ▸ ӷথσΟεϓϨΠ ▸ डޫܕʢόοΫϥΠτ͋Γʣ ▸ iPhone XR͸ʮLiquid Retina

    HDσΟεϓϨΠʯʮIPSςΫϊϩ δʔ౥ࡌʯ ▸ ༗ػELσΟεϓϨΠ ▸ ࣗൃޫܕʢόοΫϥΠτͳ͠ʣ ▸ iPhone XS͸ʮSuper Retina HDσΟεϓϨΠʯʮOLEDʯ 106
  31. 109

  32. ࢀߟจݙͱ͔ ΠϥϨͱ৭ਂ౓ ▸ ৭ਂ౓ͱ͸ - IT༻ޠࣙయ e-Words ▸ RGB Ϗοτਂ౓ͷ͏Μͪ͘

    (લฤ) ʙ લఏ஌ࣝ - Qiita ▸ Why are the colors of certain PNG files getting distorted when opened in Illustrator? - Graphic Design Stack Exchange 115
  33. ࢀߟจݙͱ͔ ΨΠυϥΠϯྨ ▸ 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
  34. ࢀߟจݙͱ͔ ࠞ৭ͱද৭ܥͱ৭֮ͱଞ͍Ζ͍Ζ ▸ ೔ຊ৭࠼ֶձฤʢ2011ʣʰ৽ฤɹ৭࠼ՊֶϋϯυϒοΫɹୈ3൛ʱ౦ژେֶग़൛ձ ▸ Ճ๏ࠞ৭ - ͔΄͏͜Μ͠ΐ͘ | ෢ଂ໺ඒज़େֶ

    ଄ܗϑΝΠϧ ▸ ޫͱ৭ͷ࿩ ୈҰ෦ʛςΫχΧϧΨΠυɾίϥϜʛCCSɿγʔγʔΤεגࣜձࣾ ▸ ༻ޠू ▸ XYZද৭ܥʛ৭ͷදΘ͠ํʛDIC Color Design, Inc. ▸ XYZ৭ۭؒʹഭΔ(2) - Qiita ▸ ৭ͷ਺஋Խʹ͸ɺද৭ܥΛ࢖༻͠·͢ɻ1-ֶָ͘͠΂Δ஌ܙା | ίχΧϛϊϧλ 117
  35. ࢀߟจݙͱ͔ ΧϥʔϚωδϝϯτ ▸ ৭ۭؒ - ө૾৘ใϝσΟΞֶձ ▸ sRGB ▸ σδλϧөըͷΧϥʔϚωδϝϯτ

    - ౦ژࠃཱۙ୅ඒज़ؗ ▸ ୈ7ճ "ۂઢඒ"͕৭࠶ݱੑͷܾΊखʹͳΔʁʕʕӷথσΟεϓϨΠͷʮΨϯϚʯΛ஌Ζ͏ | EIZOגࣜձࣾ ▸ ෺ཧϕʔεϨϯμϦϯά -ϦχΞϫʔΫϑϩʔฤ (1)- | Cygames Engineers' Blog ▸ ΨϯϚิਖ਼ͷ͏Μͪ͘ - Qiita 118
  36. ࢀߟจݙͱ͔ ৭֮ҟৗ ▸ ೔ຊҩֶձ ҩֶ༻ޠࣙయ WEB൛ɿ੔ཧ͞Εͨ༻ޠʻ৭֮ؔ࿈༻ޠʹ͍ͭͯʼ ▸ ʮ༏ੑʯʮྼੑʯ༻ޠ࢖Θͣɹ೔ຊҨ఻ֶձ͕ݴ͍׵͑ɹɹ:೔ຊܦࡁ৽ฉ ▸ ৭֮ݕࠪද

    ংจ – ެӹࡒஂ๏ਓ Ұ৽ձ ▸ ͜Εͬͯݟؒҧ͍ʁ໨ͷҟৗ͕Ҿ͖ى͜͢େࣄ݅ - NHK Ψοςϯʂ ▸ 2.৭֮ো֐ऀͷ࣮ଶͷ೺Ѳ ▸ ৭֮ҟৗҨ఻ࢠͷݚڀʛ࣎լҩՊେֶɹ؟Պֶߨ࠲ ▸ ৭֮ҟৗ - ໨ͷපؾඦՊʛࢀఱ੡ༀ ▸ ྆ଆޙ಄༿පมʹΑΔେ೴ੑ৭֮ো֐ͷ1ྫ - J-Stage ▸ ΧϥʔϢχόʔαϧσβΠϯͷͨΊͷ৭ऑγϛϡϨʔγϣϯ ▸ ৭֮ͷଟ༷ੑͱࢹ֮όϦΞϑϦʔͳϓϨθϯςʔγϣϯ 119
  37. ࢀߟจݙͱ͔ ϢχόʔαϧσβΠϯͱ͔ 120 ▸ ΧϥʔϢχόʔαϧσβΠϯਪ঑഑৭ηοτ ▸ ౦ژ౎ΧϥʔϢχόʔαϧσβΠϯΨΠυϥΠϯ ▸ ҆શ৭ٴͼ҆શඪࣝʹؔ͢Δ JIS

    վਖ਼ ▸ ҩֶੜ෺ֶऀ޲͖ ৭໡ͷਓʹ΋Θ͔ΔόϦΞϑϦʔϓϨθϯςʔγϣϯ๏ ▸ ͔Θ͍͍ϑϦʔૉࡐू ͍Β͢ͱ΍ ▸ ʰ͍Β͢ͱ΍ʱͷૉࡐΛ৭֮ো͕͍ͷࢹ఺͔ΒݟͯΈͨ | ͘Ζͻͭ͡ͷϝϞா
  38. ࢀߟจݙͱ͔ ίϯτϥετ ▸ ίϯτϥετൺͱ͸ - 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
  39. ࢀߟจݙͱ͔ ࢹ֮աහͱμʔΫϞʔυͱ৭൓స ▸ ࢹ͕֮աහʮޫʯʮ৭ʯ͕ετϨεɿࠔΓ͝ͱͷτϦηπʢऔѻઆ໌ॻʣʛൃୡো֐ϓϩδΣΫτ ▸ ᠤ໌ʢ·Ϳ͠͞ʣɿΑ͋͘Δ؟Պ࣬ױͷղઆ | ͭͭΈ؟ՊΫϦχοΫʢ࿅അ۠ʣ ▸ 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