주어진 배경색에 대한 양호한 텍스트 전경 색상

StackOverflow https://stackoverflow.com/questions/946544

문제

나는 색상 선택 버튼을 그리는데 RGB에서 주어진 배경색에 대한 좋은 텍스트 색상 (전경)을 얻을 수있는 멋지고 간단한 공식을 찾고 있습니다.

간단한 시도는 보완 색상을 취하는 것이지만 순수한 파란색 또는 순수한 빨간색과 같은 색상에 대한 홀수 버튼을 생성합니다.
잘 알려진 것이 있습니까?

그것이 중요하다면, 나는 QT를 사용하고 있습니다.

도움이 되었습니까?

해결책

최대한의 가독성을 위해, 함께 작동하지 않는 색조에 들어 가지 않고 최대 밝기 대비를 원합니다. 이것을하는 가장 일관된 방법은 검은색 또는 하얀 텍스트 색상. 당신은 더 미적으로 즐거운 계획을 세울 수 있지만, 그 중 어느 것도 더 읽기 쉬운 계획을 세울 수 있습니다.

흑백을 선택하려면 배경의 밝기를 알아야합니다. 이것은 두 가지 요소로 인해 조금 더 복잡해집니다.

  • 개별 원초적 원시의 밝기는 빨간색, 녹색 및 파란색이 동일하지 않습니다. 내가 줄 수있는 가장 빠른 조언은 기존 공식을 사용하여 RGB를 회색으로 변환하는 것입니다 -R*0.299 + G*0.587 + B*0.114. 다른 공식이 많이 있습니다.

  • 디스플레이에 적용된 감마 곡선은 예상보다 중간 회색 값을 높게 만듭니다. 이것은 186이 아닌 중간 값으로 186을 사용하여 쉽게 해결할 수 있습니다. 186보다 작은 것은 흰색 텍스트를 사용해야하며 186보다 큰 것은 검은 텍스트를 사용해야합니다.

다른 팁

저는 RGB와 관련된 프로그래밍에 대한 전문가는 아니지만 디자이너의 관점에서 볼 때 가장 읽기 쉬운 색상은 종종 훨씬 가볍습니다 (배경색이 어두운 경우) 또는 어두운 경우 (배경색이 밝은 경우) 버전의 버전입니다. 같은 그늘.

기본적으로 RGB 값을 취하고 0에 가까워지면 전경 색상에 대해 동일한 양으로 또는 가벼운 BG 인 경우 그 반대도 마찬가지입니다.

보완 색상은 실제로 가독성을 위해 눈에 실제로 고통 스러울 수 있습니다.

가독성에 대한 개요를 활용하십시오

만약 "좋은 텍스트 색상 (전경)" 당신은 그것을 위해 의도합니다 읽기 쉬움 사용자가 선택할 때 목적 any background colour, 당신은 항상 검은 윤곽선을 가진 흰색 텍스트를 생성 할 수 있습니다. 검은 색에서 흰색 및 그 사이의 모든 것이 단단하고 패턴 또는 그라디언트 배경에서 읽을 수 있습니다.

enter image description here

이것이 당신의 의도의 표시에 부딪치지 않더라도, 나는 비슷한 솔루션을 찾고 있었기 때문에 여기에 게시 할 가치가 있다고 생각합니다.

Mark의 응답 위에 기반으로, 여기에 일을 할 루비 코드가 있습니다.

rgbval = "8A23C0".hex
r = rgbval >> 16
g = (rgbval & 65280) >> 8
b = rgbval & 255
brightness = r*0.299 + g*0.587 + b*0.114
return (brightness > 160) ? "#000" : "#fff"

당신은 광도가 높은 차이로 더 나은 것입니다. 일반적으로, 컬러 텍스트를 가진 색깔의 배경은 가독성을 위해 빨려 들어가서 시간이 지남에 따라 눈을 아프게합니다. 검은 색 텍스트가있는 가볍게 착색 된 색상 (예 : HSB, S ~ 10%, B> 90%)은 검은 색 배경 위에 텍스트가 적거나 가볍게 착색 된 텍스트가 작동합니다. 나는 둘 다 색칠에서 멀리 떨어져있을 것입니다. 흰색 배경에 미묘한 색상을 가진 다크 텍스트 (B ~ 30%, s> 50%)도 괜찮을 수 있습니다. 짙은 파란색 배경의 노란색 (Amber) 텍스트는 검은 색의 앰버 또는 녹색과 마찬가지로 가독성이 뛰어납니다. 이것이 바로 오래된 덤터 (VT100, VT52 등)가 이러한 색상을 위해 갔던 이유입니다.

'룩'을 위해 색상을 사용해야하는 경우 H와 B를 모두 반전시킬 수 있으며, 포화를 중간 정도에서 낮은 수준으로 고정시킬 수 있습니다.

마지막 참고 사항 : 회색 배경이 50% 인 경우 인터페이스를 다시 생각하십시오. 당신은 당신의 동적 범위의 절반을 강탈하고 있습니다! 35 세 이상의 사람을 포함하여 가시성이 낮은 사용자를 소외시키고 있습니다 ...

색상 조합은 종종 조심스럽게 선택되지 않을 때 끔찍해 보입니다. 색상의 밝기에 따라 텍스트에 흰색 또는 검은 색을 사용해 보지 않겠습니까? (먼저 HSB로 변환해야합니다.)

또는 사용자가 흑백 텍스트를 선택하게하십시오.

또는 사전 정의 된 조합을 사용하십시오. 이것이 캘린더 제품에서 Google이하는 일입니다.

나는 Simailr 답변을 찾고 있었고이 게시물과 내가 공유 할 것이라고 생각한 다른 게시물을 발견했습니다. 에 따르면 http://juicystudio.com/services/luminositycontratio.php#specify "WCAG 2.0의 성공 기준 1.4.3에는 텍스트의 시각적 표현이 필요하며 텍스트 이미지는 일부 예외를 제외하고 4.5 : 1 이상의 대비 비율을 갖습니다. 이 사이트를 사용하면 대안이나 범위를 제안하는 경우 도움이되지만 대비를 계산하기 위해 전경과 배경색을 넣을 수 있습니다.

색상 대비를 시각화하기 위해 찾은 최고의 사이트 중 하나는 http://colorizer.org/ 거의 모든 방식의 색상 스케일 (RGB, CMYK 등)을 동시에 조정 한 다음 노란색 배경의 흰색 텍스트와 같은 화면의 결과를 보여줍니다.

나는 보통 색상 보완 물을보고, 또한 색상 보완 휠도 있습니다.

http://www.makart.com/resources/artclass/cwheel.html

색상이 HSL 인 경우 적절한 계산을 위해 색조를 180도 씩 뒤집습니다.

나는 HSV로 변환하는 것이 방법일지도 모르지만 IMO는 색조를 바꾸는 것이 이상하게 보일 것입니다. 나는 색조를 유지하고 값과 포화로 피를 흘리려고 노력할 것입니다 (어두운 빨간색 텍스트가있는 연한 빨간색 버튼 ... HM 소리가 무섭습니다 :-)).

라이센스 : CC-BY-SA ~와 함께 속성
제휴하지 않습니다 StackOverflow
scroll top