iOSDC Japan 2019 60 mins for color

iOSDC Japan 2019 60 mins for color

Bf65cc9bdf26321a7579ddca7930cd10?s=128

Shigure Shimotori

September 06, 2019
Tweet

Transcript

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

    6

  3. 8.

    8

  4. 15.

    15

  5. 16.

    16

  6. 17.

    17

  7. 18.

    18

  8. 19.

    19

  9. 20.

    20

  10. 23.

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

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

    28

  14. 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/
  15. 41.
  16. 45.

    XYZͷੈք΁Α͏ͦ͜ʂ RGBܹࢗ஋Λվ଄ͯ͠XYZܹࢗ஋ʹ͢Δ ▸ XYZܹࢗ஋͸RGB൛ͷܹࢗ஋Λͪΐͬͱ͍͚ͬͨͩ͡ͷ΋ͷ ▸ ܭࢉ͠΍͍͢Α͏ʹௐ੔ ▸ Yً͕౓୲౰ʹͳΔΑ͏ʹௐ੔ ʲ௒ॏཁɾςετʹग़·͢ʳ ▸

    ྘৭͕1൪໌Δ͘ݟ͑ΔͷͰɺ࣮࣭྘৭ͷ୲౰Ͱ΋͋Δ ▸ Z͕୹೾௕ʢ੨৭ʣͷ୲౰ʹͳΔΑ͏ʹௐ੔ ▸ ͳͲͳͲ ▸ XYZܹࢗ஋Λ࢖ͬͯͦΕͧΕͷ৭ΛදݱʢXYZද৭ܥʣ 45
  17. 46.

    XYZͷੈք΁Α͏ͦ͜ʂ ً౓ʁ໌౓ʁ ▸ ً౓ͱ໌౓͸ಉ͡͡Όͳ͍ʂ ▸ ً౓ / luminance ▸ ৺ཧ෺ཧྔ

    ▸ ໘ੵͰޫͷڧ͞Λׂͬͨ΋ͷ ▸ ໌౓ / brightness ▸ ৭ͷࡾଐੑͷ1ͭ ▸ RGBͷ஋͔ΒٻΊΔ 46
  18. 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
  19. 50.

    XYZͷੈք΁Α͏ͦ͜ʂ ৭ۭؒ / color space ▸ σΟεϓϨΠ΍ϓϦϯλ͕ѻ͏৭ͷൣғ΍ํ๏Λࣔͨ͠΋ͷ ▸ ݪ৭ /

    primariesɿݪ৭͕ͦΕͧΕͲͷ৭͔ ▸ ৭Ҭ / color gamutɿѻ͑Δ৭ͷൣғ͸Ͳ͔͜ ▸ ΨϯϚ஋ / gamma transfer functionɿ໌Δ͞ʹؔ͢Δௐ੔۩߹ ▸ ͞·͟·ͳن͕֨͋Δ 50
  20. 51.

    XYZͷੈք΁Α͏ͦ͜ʂ ΨϯϚ஋ / gamma transfer function ▸ ৭ʹͲͷ͘Β͍ͷิਖ਼ΛՃ͑Δ͔ ▸ ิਖ਼͕ՃΘ͍ͬͯͳ͍৭͸ઢܗ

    / linearͱݺ͹ΕΔ ▸ ݹ͘͸ϒϥ΢ϯ؅ʹΑΔ৭ͷมԽΛमਖ਼͢Δ΋ͷ ▸ ਓؒ͸໌Δ͍৭ΑΓ҉͍৭ͷํͷมԽʹහײ 51 ↓ ݟΔ؀ڥʹԠͨ͡ิਖ਼ΛՃ͑Δʂ
  21. 52.
  22. 54.

    XYZͷੈք΁Α͏ͦ͜ʂ sRGB৭ۭؒ / standard Red Green Blue ▸ IEC͕1998೥ʹ੍ఆͨ͠ن֨ ▸

    ౰࣌ͷΧϥʔCRTσΟεϓϨΠʢϒϥ΢ϯ؅ʣΛҙࣝͨ͠΋ͷ ▸ ఆ൪ɺΑ͘ݟΔ ▸ iPhone΋جຊతʹ͸͜ͷ৭ۭؒΛ࢖͏ 54
  23. 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
  24. 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 ͪΐͬͱ઱΍͔ʁ
  25. 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
  26. 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
  27. 67.
  28. 71.

    ΋ͷͷݟ͑ํʹ͸ݸਓ͕ࠩ͋Γ·͢ ߟྀ͢΂͖ࢹ֮ಛੑ͍Ζ͍Ζ ▸ ৭֮ / Color vision ▸ ίϯτϥετײ౓ /

    Contrast sensitivity ▸ ࢹ֮աහ / Light sensitivity, Photophobia ▸ ࢹྗ / Visual acuity ▸ ࢹ໺ / Field of vision 71 https://www.w3.org/TR/low-vision-needs/
  29. 72.

    ΋ͷͷݟ͑ํʹ͸ݸਓ͕ࠩ͋Γ·͢ ߟྀ͢΂͖ࢹ֮ಛੑ͍Ζ͍Ζ ▸ ৭֮ / Color vision ▸ ίϯτϥετײ౓ /

    Contrast sensitivity ▸ ࢹ֮աහ / Light sensitivity, Photophobia ▸ ࢹྗ / Visual acuity ▸ ࢹ໺ / Field of vision 72 https://www.w3.org/TR/low-vision-needs/
  30. 75.

    ৭֮ʮҟৗʯͬͯʁ ৭֮ҟৗͷݪҼ͸͍Ζ͍Ζ ▸ ઌఱੑ৭֮ҟৗʢஉੑ4.5%ʙ10%ɺঁੑ0.2%ʙ0.4%ʣ ▸ Lਲ਼ମػೳෆશʹΑΔ΋ͷʢ1ܕ৭֮ / Protanopiaʣ ▸ Mਲ਼ମػೳෆશʹΑΔ΋ͷʢ2ܕ৭֮

    / Deuteranopiaʣ ▸ Sਲ਼ମػೳෆશʹΑΔ΋ͷʢ3ܕ৭֮ / Tritanopiaʣʢඇৗʹ·Εʣ ▸ ޙఱੑ৭֮ҟৗ ▸ ؟࣬ױʹΑΔ΋ͷ ▸ த਻ਆܦܥ࣬ױʹΑΔ΋ͷ ▸ ΄͔͍Ζ͍Ζ 75
  31. 76.

    ৭֮ʮҟৗʯͬͯʁ ઌఱੑ৭֮ҟৗ - ਲ਼ମͱછ৭ମ ▸ Lਲ਼ମͱMਲ਼ମʹҟৗ͕ൃੜ͢Δͱ͖ ▸ ੺৭ͱ྘৭ͷ۠ผ͕೉͘͠ͳΔ ▸ Xછ৭ମ্Ͱྡಉ࢜ʹฒΜͰ͍ΔͨΊɺෆ౳ަ伹͠΍͍͢

    ▸ ൐ੑજੑҨ఻Λ͢ΔͨΊɺஉੑͷํ͕ස౓͕ߴ͍ ▸ Sਲ਼ମʹҟৗ͕ൃੜ͢Δͱ͖ ▸ ੨৭ͱԫ৭ͷ۠ผ͕೉͘͠ͳΔ ▸ ৗછ৭ମ্ͰݦੑҨ఻Λ͢Δ͕ස౓͸ͱͯ΋গͳ͍ 76
  32. 84.

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

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

    92

  34. 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
  35. 100.
  36. 106.

    μʔΫϞʔυ͍ͬͯ͏ͷ͕࠷ۙͷྲྀߦΓͳͷʁͳΜͰʁ σΟεϓϨΠͷछྨ ▸ ӷথσΟεϓϨΠ ▸ डޫܕʢόοΫϥΠτ͋Γʣ ▸ iPhone XR͸ʮLiquid Retina

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

    109

  38. 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
  39. 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
  40. 117.

    ࢀߟจݙͱ͔ ࠞ৭ͱද৭ܥͱ৭֮ͱଞ͍Ζ͍Ζ ▸ ೔ຊ৭࠼ֶձฤʢ2011ʣʰ৽ฤɹ৭࠼ՊֶϋϯυϒοΫɹୈ3൛ʱ౦ژେֶग़൛ձ ▸ Ճ๏ࠞ৭ - ͔΄͏͜Μ͠ΐ͘ | ෢ଂ໺ඒज़େֶ

    ଄ܗϑΝΠϧ ▸ ޫͱ৭ͷ࿩ ୈҰ෦ʛςΫχΧϧΨΠυɾίϥϜʛCCSɿγʔγʔΤεגࣜձࣾ ▸ ༻ޠू ▸ XYZද৭ܥʛ৭ͷදΘ͠ํʛDIC Color Design, Inc. ▸ XYZ৭ۭؒʹഭΔ(2) - Qiita ▸ ৭ͷ਺஋Խʹ͸ɺද৭ܥΛ࢖༻͠·͢ɻ1-ֶָ͘͠΂Δ஌ܙା | ίχΧϛϊϧλ 117
  41. 118.

    ࢀߟจݙͱ͔ ΧϥʔϚωδϝϯτ ▸ ৭ۭؒ - ө૾৘ใϝσΟΞֶձ ▸ sRGB ▸ σδλϧөըͷΧϥʔϚωδϝϯτ

    - ౦ژࠃཱۙ୅ඒज़ؗ ▸ ୈ7ճ "ۂઢඒ"͕৭࠶ݱੑͷܾΊखʹͳΔʁʕʕӷথσΟεϓϨΠͷʮΨϯϚʯΛ஌Ζ͏ | EIZOגࣜձࣾ ▸ ෺ཧϕʔεϨϯμϦϯά -ϦχΞϫʔΫϑϩʔฤ (1)- | Cygames Engineers' Blog ▸ ΨϯϚิਖ਼ͷ͏Μͪ͘ - Qiita 118
  42. 119.

    ࢀߟจݙͱ͔ ৭֮ҟৗ ▸ ೔ຊҩֶձ ҩֶ༻ޠࣙయ WEB൛ɿ੔ཧ͞Εͨ༻ޠʻ৭֮ؔ࿈༻ޠʹ͍ͭͯʼ ▸ ʮ༏ੑʯʮྼੑʯ༻ޠ࢖Θͣɹ೔ຊҨ఻ֶձ͕ݴ͍׵͑ɹɹ:೔ຊܦࡁ৽ฉ ▸ ৭֮ݕࠪද

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

    ࢀߟจݙͱ͔ ϢχόʔαϧσβΠϯͱ͔ 120 ▸ ΧϥʔϢχόʔαϧσβΠϯਪ঑഑৭ηοτ ▸ ౦ژ౎ΧϥʔϢχόʔαϧσβΠϯΨΠυϥΠϯ ▸ ҆શ৭ٴͼ҆શඪࣝʹؔ͢Δ JIS

    վਖ਼ ▸ ҩֶੜ෺ֶऀ޲͖ ৭໡ͷਓʹ΋Θ͔ΔόϦΞϑϦʔϓϨθϯςʔγϣϯ๏ ▸ ͔Θ͍͍ϑϦʔૉࡐू ͍Β͢ͱ΍ ▸ ʰ͍Β͢ͱ΍ʱͷૉࡐΛ৭֮ো͕͍ͷࢹ఺͔ΒݟͯΈͨ | ͘Ζͻͭ͡ͷϝϞா
  44. 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
  45. 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
  46. 123.