배경색에 따른, 글자 색 변환

이전 글에서 작성했던 커스텀 Color Picker를 사용하다 보니,

글자색이 검정색인데 배경색이 어두운 경우 글자의 가시성이 떨어지는 문제를 발견했습니다.

 

이를 해결하기 위해 Color Picker에서 추출한 색상을 기반으로 글자색을 자동으로 결정하는 기능을 추가했습니다.

디자이너와 협업하여 가시성을 확보할 수 있는 기준점을 잡았습니다.

 

이러한 개선을 통해 카드의 색상과 상관없이 글의 가독성을 높일 수 있었습니다.

전체 코드

private func changeColorsAfterCardColorChange(){
    let cardColor = card.cardColor
    let r = cardColor.components.r
    let g = cardColor.components.g
    let b = cardColor.components.b
    let cmax = max(r, g, b)
    let cmin = min(r, g, b)
    let lightness = ((cmax+cmin)/2.0)*100
    var hue: CGFloat = 0.0
    var saturation: CGFloat = 0.0
    var brightness: CGFloat = 0.0
    var alpha: CGFloat = 0.0
    UIColor(cardColor).getHue(&hue, saturation: &saturation, brightness: &brightness, alpha: &alpha)
    lyricsColor = lightness >= 60 ? .black : .white
    if( 0.0 <= brightness && brightness < 0.70){
        lyricsContainerColor = Color(UIColor(hue: hue, saturation: saturation, brightness: brightness+0.1, alpha: 1.0))
    }
    else if( 0.70 <= brightness && brightness <= 0.85 ){
        lyricsContainerColor = Color(UIColor(hue: hue, saturation: saturation, brightness: brightness+0.15, alpha: 1.0))
    }
    else{
        lyricsContainerColor = Color(UIColor(hue: hue, saturation: saturation, brightness: brightness-0.15, alpha: 1.0))
    }
 }

 

예시 화면