컬러 블라인드에 사용할 수있는 좋은 컬러 ​​팔레트.


13

차트를 디자인하고 있는데, 더 많은 항목이 천천히 추가됩니다. 항목에 대한 색상 목록 / 순서를 작성하고 싶습니다. 이는 색상 블라인드가 각 항목을 구별하는 데 가장 유용합니다. 아이디어가 어떻게 / 어디서 시작해야합니까?

답변:


14

"체험 및 오류"접근 방식을 원한다면 컴퓨터 화면에서 중수 증 / 중수 증, 중생 / 종 아종 및 색소 성 유형의 색맹을 시뮬레이트하는 Color Oracle (교차 플랫폼) 이라는 도구를 제안합니다 .

또한 Photoshop에서는 ViewProof Setup(CS5는 최소한 있음)에서 색맹 방지 설정을 사용할 수 있습니다. 그러나 차트를 디자인하려는 경우 Photoshop이 약간 과잉 될 수 있습니다.


1
포토샵 증거로 +1 내가 다른 날에 그것을 시도했다. 정말
멋져요

요점은 테스트가 올바른 접근법이라는 것입니다. "안전한"팔레트를 선택하는 것은 불필요하게 제한적일 것입니다.
Charles Stewart

7

어떤 종류의 색맹을 해결하려고하십니까? 이 링크

http://en.wikipedia.org/wiki/Color_blindness

색맹 유형에 따라 피해야 할 다양한 색상에 대한 좋은 아이디어를 제공해야합니다.

일반적으로 파란색과 녹색을 선택하는 데 의존하는 것은 욕설을 유발할 수 있습니다. 물건이 순전히 단색으로 보이는지 확인하고 싶을 수도 있습니다.

"색맹"의 범위가 있기 때문에 아마도 컨트롤 등이 중복성을 가지고 있는지 항상 확인하고 싶을 것입니다. 또는 빨간색에 흰색).


중복성을 위해 좋은 전화
JamesHenare

1
@Lauren : 음, 당신은 당신의 악한 은신처를위한 UI를 디자인 할 때 너무 조심할 수 없습니다 ...
lawndartcatcher

그렇습니다. 5 살짜리를 고용하여 그랜드 플랜을 시험하십시오. :)
Lauren-Clear-Monica-Ipsum

5

색맹에는 여러 종류가 있습니다. 열쇠는 적절한 대비가 있는지 확인하는 것입니다. 더 좋은 방법은 색상에만 의존하지 말고 동일한 정보를 항상 모양, 대비 또는 순서대로 다룰 수 있습니다. 이미지가 흑백으로 이해하기 쉬운 경우 통과합니다.


기술적으로 많은 종류가 있지만, 대다수는 중수소 증 또는 중등도의 중수소 증을 앓고 있습니다. 거의 모든 나머지는 원생 또는 원생 종이 있습니다. 위의 모든 것은 적 녹의 손실입니다. 내가 이해하는 것처럼 나머지 모든 유형 (청색 또는 단색)은 인구의 0.01 % 미만입니다. 그래서 나는 주로 시력과 중수소 증 (Adobe 시뮬레이션 사용)을 목표로 삼은 후 원 생체 시뮬레이션을 사용하여 약간 조정했습니다.
Jon Coombs

빨간색을 사용하지 않은 색상 (보통 자홍색 또는 주황색)으로 완전히 바꾸면 도움이됩니다. 안드로이드는 많은 것을 해냈습니다. (또는 녹색을 대체 할 수도 있습니다.) 일부 아이콘에 빨간색 (또는 녹색)을 사용하는 경우 컬러 아이콘을 바꾸는 것은 쉽지 않습니다. (우리에게는 레거시 아이콘이 모두 단색 일 수는 없습니다.) 고급스러운 스왑 가능한 팔레트가있는 경우 별도의 자동으로 최적화 할 수 있습니다. 그리고 prot., 심지어 tritanopia / tritanomaly에 대한 세 번째 옵션을 추가하십시오. 교체 가능한 경우 고 대비 모드 (어두운 bg의 밝은 텍스트)를 사용하는 것이 대체 방법이지만 훨씬 더 유용합니다.
Jon Coombs

4

나는 색맹입니다. "우리"는 "당신"만큼 색상을 사용하여 그래픽을 구별하는 것을 좋아합니다. 세상에서 당신보다 색상이 적습니다. 여기 80/20 규칙의 정신에 대한 실용적인 제안이 있습니다.

첫 번째 유형의 컬러 센서 (프로토)가 작동하지 않으면 시력은 반자동입니다. 그들이 약간 잘못 행동하면 당신은 반 탄성입니다. 다른 두 가지 유형의 컬러 센서에 대해서도 반복하고 'proto'대신 'deuter'또는 'trito'를 사용하십시오. (1,2,3의 경우 그리스어라고 생각합니다).

실용적인 기회는 중수 종이 다른 유형보다 훨씬 더 널리 퍼져 있다는 사실에서 비롯됩니다. 모든 남성의 5 %. 나머지는 남성에서 1 % 미만, 심지어 여성에서 더 적은 점수를받습니다. 따라서 중수 증가들을위한 간단한 해결책은 먼 길을 가고 있습니다. 저는 개인적으로 그래프에서 선의 차이를보기 위해 색상을 직접 구성하고 싶지는 않습니다. (항상 발생하는).

작은 색상 세트를 아래에 포함시켜 쉽게 차이점을 볼 수 있습니다. 나는 더 많은 것을 넣으려고 실패했습니다. 그래서 팔레트가 얼마나 작아야하는지 알 수 있습니다.

Nb. 사용자 경험에서 이러한 색상을 이름으로 언급하는 것은 아무 소용이 없습니다. 우리를 위해 Deuts-마치 "당신"이 거의 같은 색으로 불필요하게 중복 된 많은 이름을 발명 한 것 같습니다 :-)

rgb (255, 204, 153)

RGB (204, 204, 255)

RGB (255, 102, 102)

RGB (139, 230, 2)

빨간

노랑

RGB (51, 51, 255)

RGB (153, 153, 153)

rgb (153, 0, 0)

RGB (51, 51, 51)

rgb (0, 0, 102)

RGB (120, 102, 75)


1
색상을 표시하기 위해 복사 한 html 조각이 제대로 표시되지 않았습니다. 다시 시도해 보겠습니다.
pete howard

여기에 나중에 jsfiddle.net/kgasj68o
산타

2

가장 일반적인 종류의 색맹은 빨강-녹색 색맹입니다 (빨간색 감지 또는 녹색 감지에는 결함이있을 수 있지만 둘다는 거의 없습니다). 따라서 스펙트럼의 적록 부분의 차이에 의존하지 마십시오. (예를 들어 연한 녹색과 연한 주황색은 같은 사람들에게 동일한 경향이 있습니다.)

특히주의를 기울이려면 파란색 노란색 축 (매우 진한 파란색, 아쿠아, 흰색, 차트 재사용, 갈색)에 색상을 배치 할 수 있습니다. 모든 적록 문제는 여전히 개인이 파란색이 다르다는 것을 알 수있게합니다. 노랑은 녹색 콘과 빨강 콘을 모두 활성화 할 수 있다는 장점이 있으므로 둘 중 하나에 문제가있는 경우 여전히 눈에 잘 띄게됩니다. 또는 밝기가 증가하는 모든 스트레칭 (예 : 빨강-> 노랑-> 흰색)이 대부분의 사람들에게 보입니다. 그러나 빨강이 검정과 다르다고 가정하지 마십시오.


2

파이어 폭스를위한 몇 가지 도구가 있습니다.

Afaik, 몇 가지 지침이있는 인증서도 있습니다. 논문을 살펴 보았지만 지금까지 찾지 못했습니다. Google은 반드시 귀하의 국가에서 사용 가능한 다른 인증서에 대해 알려줄 것입니다.


2

구체적인 예나 방법을 찾기가 어렵 기 때문에 이것을 부활시키고 있습니다.

시뮬레이터를 사용하면 Deuteranopia를 타겟팅하면 대부분의 사람들을 대상으로하며 Protanopia를 지원하는 것은 거의 모든 사람들을 대상으로한다는 점을 명심하여이 목표를 달성하는 데 도움이됩니다. (나머지는 인구의 0.01 % 미만이라고 생각합니다.)

Illustrator와 같은 Adobe 제품에는 매우 유용한 시뮬레이터가 있습니다 (새 창을 열고보기> 교정 설정> 색상 실명 ...을 선택). 그리고 Color Contrast Analyzer와 같은 무료 독립형 도구도 있습니다.

다음은 6 색 팔레트 (여섯 번째 색상이 빨간색 또는 마젠타 중 하나임)와 두 시뮬레이션을 모두 보여주는 Illustrator의 샘플 스크린 샷입니다. 왼쪽 하단은 통계적으로 가장 중요한 것입니다.

이 경우 자주색은 거의 유용하지 않습니다 (quite faded, 그리고 여전히 파란색 및 / 또는 자홍색과 대비가 낮음). 또한 "가장 안전한"옵션 (빨간색을 대체하는 전체 마젠타)이 더 클 수 있습니다. CVD를 가진 대부분의 사람들에게 빨강 및 녹색의 채도 / 밝기를 조정하면 인식 가능한 명암을 제공 할 수 있습니다.

희망적으로 색상이 안전한 팔레트

(이 팔레트 / 이미지를 다시 사용하기 전에 확인하십시오.)

HSL 색 공간을 사용하는 것이 좋습니다. HSB (일명 HSV)는 특히 RGB 또는 CMYK에 비해 매우 친숙합니다. 참고로 두 시스템에서는 H 색조 값만 동일합니다. 여기서 각 열은 단일 색조 번호를 사용합니다. 나중에 Adobe에서 또는 colorizer.org 의 우수한 도구를 사용하여 RGB 코드를 나중에 추출 할 수 있습니다 . 16 진수 RGB 코드는 슬프게도 프로그래머가 가장 간결하고 직접 사용할 수 있지만 CSS로 작업하는 경우 HSL (yay)을 직접 지원합니다.

여기에서 블루의 채도는 (a) 부드러운 링크 / 버튼 색상이고 (b) 이러한 채도가 높은 마젠타 및 자주색과 더 대조적으로 낮습니다. 열 내에서 주요 변형은 밝기이지만 채도 변형으로도 벗어날 수 있습니다.


1

Photoshop에 없거나 위에 언급 된 색맹 교정보기가없는 이전 버전 인 경우 회색조로 변환하여 디자인의 밝기 대비를 확인할 수 있습니다. 또는 이전 버전의 PS 인 경우 채도를 완전히 낮춘 색조 및 채도 레이어를 사용하거나 그라디언트로 검은 색을 흰색으로 사용하는 그라디언트 맵을 사용할 수 있습니다. 해당 레이어를 문서의 최상위 레이어로 설정 한 다음 대비를 확인하려면 항상 켭니다. 그라디언트 맵은 밝기 측면에서 서로 대비되는 색상 측면에서 더 정확하기 때문에 선호하지만 (빨리 채도가 떨어지는 경우보다 약간 밝게 표시됩니다) 디자인에서 문제 영역을 표시 할 수 있습니다. 보기에서 페이지가보기 좋으면 색맹 인 사용자에게는 문제가되지 않습니다.


0

여기에 이미지 설명을 입력하십시오

그림 1 : 이시하라 색맹 테스트 .

나는 얼마간 비슷한 질문에 대답했다.

색맹 사용자에게 제공 할 색상 팔레트의 좋은 소스는 무엇입니까?

기본적인 결론은 다음과 같습니다. 사용자 데이터베이스의 특정 색맹 경험 (상당한 차이가 있으므로)은 조사 할 가치가 있습니다. 팔레트는 눈 먼 눈으로 볼 수있는 것에서 진화 할 것입니다.

그림 관련 :

색맹 대 삼색


그러나 색맹의 일부 형태가 얼마나 흔한 지 감안할 때 편리한 팔레트를 나열하는 웹 사이트는 없습니다. 매번 바퀴를 재창조하는 느낌이 듭니다.
Dumbledad

0

나는 이미이 질문에 대답했다는 것을 알고 있지만 방금 이것을 찾았습니다.

http://disturbmedia.com/max/colour-blindness.html

...이 작업에는 특히 적합한 색맹 시뮬레이터입니다. 나는 그것을 보았고 나는 색맹에 대해 너무 나빠서 동정심으로 팔레트를 생각할 수밖에 없었습니다. 정말-전적으로 농담이 아닙니다. 보세요

당사 사이트를 사용함과 동시에 당사의 쿠키 정책개인정보 보호정책을 읽고 이해하였음을 인정하는 것으로 간주합니다.
Licensed under cc by-sa 3.0 with attribution required.