Calculating Color Contrast for Legible Foreground

Introduction

이번시간에 소개할 내용은 임의의 배경색을 사용하는 사용하는 프로그램을 개발할 때 배경색에 대비해 읽기 쉬운 전경색을 계산하는 방법에 대해 소개합니다. 포토샵의 경우에는 이와 같은 방법을 이용해 아래 그림과 같이 색을 선택할때 현재 선택된 색을 잘 알아 볼 수 있도록 돕는 기능을 기능을 제공할 수 있습니다.

원리는 간단하게 설명하면, 사용자가 선택한 색과 전경색으로 사용할 색(흰색,검정색)과의 밝기 차이를 이용해 더 차이가 많이 나는 색을 선택하는 방식입니다.

Calculating Color Contrast for Legible Foreground

색의 밝기를 계산하고 적합한 전경색을 선택하기 위해서는 여러가지 방법이 있지만, 먼저 W3C에서는 기본적으로 YUV Color Model를 이용한 방식에 대해 소개하고 있습니다. YUV Color Model은 밝기값과 색차 신호를 이용해 색을 표현하는 방식으로, 밝기를 의미하는 Y의 값을 기준으로 임계값에 의해 적합 여부를 판단하게 됩니다.

일반적인 환경에서 사용하는 RGB Color를 YUV Color로 변환하기 위해서는 다음과 같은 식이 사용되며

밝기를 의미하는 Y값을 계산하게되면 아래와 같이 간단하게 표현될 수 있으며 W3C에서 권장하는 밝기의 기준값인 125보다 작은경우 흰색을 큰 경우 검정색을 선택 할 수 있습니다.

Color Color = Colors.Aquamarine; int Y = ((Color.R * 299) + (Color.G * 587) + (Color.B * 114)) / 1000; return Y < 125 ? Colors.White : Colors.Black;

포토샵에서는 보다 정확한 계산을 위해 LAB Color Model을 사용하는데, LAB는 국제조명위원회에서 인간의 색체인지 연구를 바탕으로 개발된 XYZ Color Model를 개선하여 개발된 Color Model입니다. (자세한 변환과정은 LAB ColorModel Wiki를 참고하시기 바랍니다.)

LAB Color Model에는 빛(휘도)을 의미하는 L성분을 가지고 있는데 포토샵에서는 L성분의 임계값을 62로 지정하여 사용하고 이를 이용해 전경색을 선택하고 있습니다. 이를 코드로 표현하면 다음과 같습니다.

double R = Color.R / 255.0; double G = Color.G / 255.0; double B = Color.B / 255.0; R = R > 0.04045 ? Math.Pow((R + 0.055) / 1.055, 2.4) : R / 12.92; G = G > 0.04045 ? Math.Pow((G + 0.055) / 1.055, 2.4) : G / 12.92; B = B > 0.04045 ? Math.Pow((B + 0.055) / 1.055, 2.4) : B / 12.92; double Y = R * 21.26 + G * 71.52 + B * 7.22; Y = Y / 100.000; Y = Y > 0.008856 ? Math.Pow(Y, 0.333333) : (Y * 7.787) + 0.13793103; double L = (116 * Y) - 16; return L < 62.0 ? Colors.White : Colors.Black;

이상으로 이번 포스팅을 마치며, 혹시 위 내용과 관련하여 궁금하신점이나 문의사항은 댓글이나 이메일로 주시면 답변드리도록 하겠습니다. 감사합니다.