[Swift][SwiftUI] 明るい色と暗い色の判定

SwiftUI

テキスト等に色をつけるとき 溶け込まない背景色を設定する方法を説明します。

環境&対象

以下の環境で動作確認を行なっています。

  • macOS Big Sur 11.1
  • Xcode 12.3

テキストが背景に溶け込まない背景色設定

背景の色を テキストの色と似た色にしてしまうと、テキストが背景に溶け込んでしまい読みづらくなってしまいます。

アプリを作成していて気をつけたいことの1つが配色で、配所の際に気をつけたいことの1つがこの点です。

しかし、アプリによってはユーザーが色を選択できるようにする必要があります。そこで、自動で背景色を調整したいと考えると、いったい何を基準に調整するのが良い?という疑問が湧いてきます。

どのように背景色を設定すれば良いか調べてみました。

輝度を調整

さまざまな方法があるかと思いますが、その1つとして、輝度を計算して、反対の輝度を持つ色を設定することです。

輝度は、英語では "Luma" と呼ばれ、RBG から以下の計算式で算出できます。

輝度 = 0.299 x (Red) + 0.587 x (Green) + 0.114 x (Blue)

Wikipedia の該当説明ページは、こちら

暗い色は、0.0 に近い値になり、明るい色は、1.0 に近い値になります。

つまり、文字色の持つ値とは反対の値を持つような色を背景色に設定することで 背景色に溶け込むことを防止できます。

SwiftUI の Color Extension

SwiftUI の Color で使いたかったので、Extension を作りました。

Color extension

#if os(iOS)
typealias SystemColor = UIColor
#elseif os(macOS)
typealias SystemColor = NSColor
#else
#error("os is not supported")
#endif

extension SystemColor {
    var rgba: (red: Double, green: Double, blue: Double, alpha: Double) {
        var red: CGFloat = 0
        var green: CGFloat = 0
        var blue: CGFloat = 0
        var alpha: CGFloat = 0
        getRed(&red, green: &green, blue: &blue, alpha: &alpha)
        return (Double(red), Double(green), Double(blue), Double(alpha))
    }
}

extension Color {
    var rgbValues:(red: Double, green: Double, blue: Double){
        let rgba = SystemColor(self).usingColorSpace(.deviceRGB)!.rgba
        return (rgba.red, rgba.green, rgba.blue)
    }
    var isLightColor:Bool {
        let rgba = self.rgbValues
        let value = (rgba.red * 0.299 + rgba.green * 0.587 + rgba.blue * 0.114)
        if value < 0.5 { return false }
        return true
    }
}

まとめ:色の輝度判定

色の輝度判定
  • 輝度 = 0.2999 x (Red) + 0.587 x (Green) + 0.114 x (Blue) で計算
  • 反対の輝度を持つ色を背景に置くと見やすいハズ

説明は以上です。
不明な点やおかしな点ありましたら、こちらまで。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です