자바스크립트로 배경과 텍스트의 색상 대비를 어떻게 동기화하나요?

반응형

배경과 텍스트의 색상 대비를 동기화하는 것은 UI 담당자의 일이겠죠? 99.9%의 사례에서 그렇습니다. 하지만, 어떤 상황들은 고정관념에서 벗어나 약간의 고민과 생각이 필요합니다.

이전에 일했던 회사 중 한 곳에서 필터 리스트를 스타일링한 적이 있습니다. 목록 자체는 특별한 것이 아니라 텍스트와 x자 모양의 닫기 버튼이 있는 알약 같은 요소들 한 뭉치였다.

The default look of the selected filters

이제 까다로운 부분이군요. 우리의 고객은 맞춤 배경색으로 세일 필터를 만들기를 원했습니다. 커스텀 컬러는 그것들을 돋보이게 하려고 했어요.

그들의 요구에는 평범하지 않은 것이 하나도 없었다. 하지만, 우리 쪽에 몇 가지 문제가 있었습니다. 우리는 CMS에 대한 추가 개발을 할 수 없었기 때문에 현재 우리가 가지고 있는 것으로 해결책을 생각해야만 했습니다. 그리고 우리가 가진 것은 색상 정보를 프런트 엔드로 전달할 수 있는 단일 텍스트 필드였습니다. 우리는 정보를 보낼 방법이 있었다. 기트! 자, 문자 색상은요? 텍스트는 주어진 배경에서 볼 수 있어야 합니다. 하지만 어떻게 하지? 우리는 입력을 제어하지 않습니다. 고객은 그렇다.

 

솔루션을 찾는 동안 StackOverflow 스레드 https://stackoverflow.com/questions/11867545/change-text-color-based-on-brightness-of-the-covered-background-area를 우연히 발견했습니다.

이 솔루션은 W3C 알고리즘을 사용하여 색상의 밝기를 계산합니다. 이 공식은 (빨간색 값 X 299) + (녹색 값 X 587) + (파란색 값 X 114) / 1000이다. 우리가 공식을 배경색에 적용하면, 우리는 그것의 인식된 밝기를 여러 가지 얻을 수 있다. 이제 그걸로 뭘 하죠? 알고리즘에 따르면, 인식된 밝기의 임계값은 125이다. 즉, 125 이하의 값은 텍스트가 흰색이어야 합니다. 그렇지 않으면 검은색이어야 합니다.

아래의 펜은 구현을 대충 재현한 것입니다.