이 색상 조합을 더 읽기 쉽게하려면 어떻게합니까?

24

기존 웹 사이트를 개선하려고 노력 중이며 이것이 내가 시작하는 것입니다.

<body style='
        background-color: rgb(50,101,152);
        color: red;
        text-decoration-color: red;
        text-decoration-style: solid;
        font-size: 12px;
        font-weight: 700;
        font-family: "Bitstream Vera Sans", Verdana, Lucida, Arial, Helvetica, sans-serif;
        //text-shadow: 0px 0px 15px white;
    '>
    This is hard to read!
</body>

이 색상 조합을 읽기 어렵다는 것을 알았습니다. 다른 사람들은 동의하지 않지만 대조, 밝기 및 기타 디스플레이 속성 (시야각도)에 크게 의존한다는 데 동의했습니다.

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

난 이미 꽤 실험 한 -webkit-text-stroke, text-shadow(위의 코드를 참조),하지만 난 하나 개의 디스플레이에서 일을 개선, 그것은 다른에 악화된다.

전반적인 색 구성표를 유지하면서 다양한 디스플레이에서 더 읽기 쉽게 만들 수있는 방법이 있습니까?

color  website-design  color-theory 
— 맥주
소스
22
이 의견을 고객에게 자유롭게 알려주십시오. 나는 수년간의 디자인 경험을 가지고 있으며, 위의 질문에서 읽을 수 있다고 생각하는 "기타"는 완전히 잘못되었다는 것을 확신 할 수 있습니다.
— mayersdesign
15
디자이너로서 30 년이 넘는 경험을 가지고 있습니다. 위의 @mayersdesign의 의견에 더 동의 할 수 없었습니다. 해당 색 구성표를 즉시 거부해야합니다.
— 스캇
6
먼저 색 구성표의 목적을 이해해야합니다. UI의 색 구성표에서 중간 색을 기본 색으로 사용하는 것이 합리적이므로 모든 강조 색은 드물게 던져야 합니다. 예를 들어 YouTube에서 어떤 색이 떠오 릅니까? 빨간색과 검은 색이지만 실제 YouTube 웹 페이지 (98 % 흰색과 밝은 회색)를 살펴보십시오. 빨강은 단지 악센트로 사용됩니다.
— 해피 아워 코딩
모두에게 감사합니다 (응답자 포함)! 나는 오늘 아침 이래로 1 ~ 2 개의 의견이있을 것으로 예상되는 것을 살펴보기 위해 SE를 다시 확인했습니다. 나는 많은 것을 배우고 설득력있는 주장을 받았다-감사합니다!
— BER들
1
1995 년 전화. 그들은 색 구성표를 다시 원합니다.
— Mazura

답변:

54

고객의 마음을 바꾸십시오.

파란색 배경의 빨간색 텍스트는 명암이 너무 낮고 특히 빨간색과 파란색이 대비되는 색상으로 제대로 작동하지 않기 때문에 가독성을 높이기위한 선택이 매우 어렵다는 사실을 해결할 수있는 것은 없습니다.

이 웹 사이트 webaim.org 는 두 가지 색상의 대비가 불완전 하다는 것을 보여줍니다.

명암은 가독성에 중요합니다

텍스트 대비는 텍스트 가독성의 가장 중요한 측면 중 하나입니다. 운 좋게도 WCAG ( Web Content Accessibility Guidelines ) 2.0은 텍스트 대비를 구체적으로 다루며 장애가있는 사람들에게 웹 액세스 기능을 제공하기는하지만 일반적으로 건전한 조언을 제공하는 지침을 제공합니다.

WCAG 레벨 AA에는 일반 텍스트의 경우 4.5 : 1 이상, 큰 텍스트의 경우 3 : 1 이상의 명암비가 필요하고 레벨 AAA에는 일반 텍스트의 경우 7 : 1 이상, 큰 텍스트의 경우 4.5 : 1의 명암비가 필요합니다.

따라서 고객의 웹 사이트는 게시 된 전문 지침 과 직접 모순 됩니다. 그것은 또한 미적 취향과 모순됩니다 (전문가의 의견으로는)

필요한 경우 디자인에 빨간색과 파란색 요소를 계속 사용할 수 있습니다. 그러나 "컨텐츠 크기"빨간색 텍스트를 파란색 배경 위에 놓으면 사이트 방문자의 대다수가 사라지게됩니다. 제 생각에는 고객이 사용하지 않도록 설득해야 할 전문적인 책임이 있습니다.

희망 제공된 링크는 단순히한다고 주장보다 더 강력한 방법으로 귀하의 케이스를 만드는 데 도움이 될 당신이 열심히 읽고 찾을 수 있습니다. 사실상 라도 유용 읽기 하드.

염색체

그것이 설득력이 없다면 이것을 시도하십시오 -Chromostereopsis 는 시청자에게 피사계 심도 문제를 일으키는 착시 현상입니다. 불쾌합니다!

— 메이어 디자인
소스
11
명확히하기 위해 W3C 문서의 명암비는 최소 입니다. 비율이 4.5 : 1 또는 7 : 1 사이 여야한다고 말하지 마십시오. 그들은 타겟팅하는 접근성 수준에 따라 그 중 적어도 하나 여야한다고 말합니다 .
— Adrian McCarthy
1
아주 좋은 점은, 특히 이것에 대한 자세한 내용을 포함하도록 답변을 업데이트했습니다.
— mayersdesign
8

완벽하거나 좋은 것은 아니지만 텍스트에 흰색 또는 다른 윤곽선을 추가하면 가독성에 도움이 될 수 있습니다.

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

클라이언트가 색상을 유지해야한다고 주장하는 경우 유용 할 수 있습니다.

— 그렘린
소스
공정하게 말하면 36pt 유형에서만 작동합니다.
— user8356
예, 훌륭한 개념입니다. 풍자적 의미는 아닙니다. 더 많이 적용할수록 텍스트를 더 잘 읽을 수 있습니다. 흰색 윤곽선을 화면 가장자리까지 끌어 내십시오. 윙크, 윙크.
— 마틴 자 스케
8

당신은 할 수 없습니다. 빨강과 파랑의 음영은 어둡고 채도가 높은 색상이며, 실제로 서로에 대해 진동하며 텍스트가 사람들의 눈을 번지 게합니다. 텍스트 가독성에 신경 쓰지 않는 개발자 또는 디자이너는 루비 레일을 사용하지 않아야합니다.

빨간색 A LOT을 더 가볍게 만드십시오. 분홍색으로 보이지만 더 읽기 쉽습니다. 또는 해당 배경에 흰색 또는 옅은 노란색을 사용하십시오. 어두운 배경은 가독성이 좋지 않습니다. 초록색과 같은 일반적인 색상을 사용할 수 있지만 훨씬 밝게 만들 수 있습니다. 그러나 밝은 빨간색 텍스트는 읽기 쉽지 않으므로 텍스트의 색 구성표를 스크랩합니다.

— 사용자 8356
소스
7

지적했듯이, 그것은 끔찍한 색상 대비입니다. 그것은 또한 색맹 사람들을위한 나쁜 팔레트입니다 (빨강 파랑 색맹으로 대비 비율은 1 : 1에 가깝게 떨어지며 완전히 읽을 수 없습니다).

여기서 가장 좋은 방법은 고객에게 컬러 텍스트와 배경을 혼합해서는 안된다는 것을 확신시키는 것입니다. 텍스트 또는 배경색을 모두 지정하지 마십시오. 색맹 인식을 시뮬레이션 할 수있는 도구 (mock-up)를 도구에로드하고 (온라인으로 몇 가지 괜찮은 옵션을 찾을 수 있음) 고객에게 결과를 보여 주면 설득력있게 도움을 줄 수 있습니다.

이것이 선택 사항이 아닌 경우, 가독성을 향상시키기 위해 시도 할 수있는 다른 것들은 다음과 같습니다.

  • 고정 폭 글꼴을 사용하십시오. 어리석게 들리지만 실제로는 대부분의 사람들이 텍스트를 더 쉽게 읽을 수 있도록 도와줍니다. 분명히 Courier New는 아니지만 Bitstream Vera Sans Mono (또는 Droid Sans Mono와 같은 것)는 여전히 괜찮아 보이며 다소 읽기 쉽습니다.
  • 서체 무게와 크기도 조금 만드십시오. 명암과 상관없이 더 크고 대담한 텍스트는 읽기 쉽습니다.
  • 색 구성표를 바꾸십시오 (즉, 밝은 빨간색 배경에 진한 파란색 텍스트로 만듭니다). 간단하게 들리지만 일반적으로 대부분의 사람들은 다른 방법보다 밝은 빨간색으로 진한 파란색을 준비하는 것이 더 쉽습니다.
  • 오프셋이있는 텍스트에 고 대비 좁은 그림자를 추가합니다 . 여기에서 원하는 것은 배경에 혼합되지 않으며 좋은 대비를 제공하는 단단한 가장자리입니다. 그림자를 오프셋하면 특히 간단한 대각선 오프셋에 도움이됩니다. 나는 또한 흰색 대신 검은 색으로 여기에 갈 것입니다 (배경이 아닌 텍스트를 강조하고 싶기 때문에 텍스트와 대비를 높이십시오). 전반적으로, 라인을 따라 뭔가 text-shadow: 2px 2px 4px black;가 아마도 괜찮은 출발점이 될 것입니다.
  • 빨강을 상당히 밝게합니다. 지금은을 사용하고 rgb(255,0,0)있습니다. 나는 rgb(255,204,204)먼저 (또는 아마도 더 가벼운) 무언가로 시도하고 거기에서 조정합니다.
  • 파란색을 어둡게합니다. 더 가까운 rgb(25,51,77)것은 거의 같은 색조이지만 텍스트를 더 읽기 쉽게 만들 수있을 정도로 어두워 야합니다.

색맹 문제에 도움이되는 또 다른 옵션 :

  • 파란색 배경을 채도를 낮추십시오. 가장 좋은 옵션은 아니지만 (색상 구성표가 약간 기울어집니다), 내가 나열된 다른 것 중에서 가장 가독성을 높이는 데 도움이됩니다. rgb(82,102,122)시작점으로 약 30 % 더 낮은 채도를 시도 합니다.
— 오스틴 헤멜 가른
소스
6

이미 텍스트 그림자를 시도했다면 동일한 색상을 유지할 수있는 유일한 가능성은 텍스트 범위를 만드는 것입니다.

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

<div> <span0>This is hard to read!</span></div><br>
<div> <span1>This is hard to read!</span></div><br>
<div> <span2>This is hard to read!</span></div><br>

스타일

span0 {text-shadow: 0px 2px 1px black;
}

span1 {padding:0 4px;
background-color: rgba(255,255,255,0.25);
position:relative;
display:inline-block;
}

span2 {padding:0 4px;
background-color: rgba(0,0,0,0.35);
position:relative;
display:inline-block;
}
— 다니엘로
소스
1
또는 단단한 평범한 흰색도 더 좋습니다
— aloisdg는 Reinstate Monica가
1
그들은 여전히 ​​나를 위해 읽기 어렵다 ..
— 해피 아워 코딩
당신에 대해 어떻게 생각하십니까 @Dylan jsfiddle.net/bersbers/xdkj76L3
— BER들
2
읽을 수 있습니다. 좋은 생각은 아닙니다. 그러나 읽을 수 있습니다.
— 해피 아워 코딩
— Yunzen
5

명암비가 최소 4.5 : 1 인 배경을 읽을 수 있으려면 배경과 텍스트 (전경의 객체)간에 명암비가 충분히 높아야합니다. https://www.oss-usa.com/color-check-ada-image-compliance 는 배경과 전경이 너무 가까워서 읽을 수 없음을 보여줍니다.

때때로 고객은 가독성 요구 사항을 충족시키기 위해 색 구성표를 완전히 보존 할 수 없으며 수정해야한다고 알려야합니다. 분명히 텍스트를 밝은 색으로 바꾸면 어두운 배경과 대비가 충분합니다.

— 맥스 톡맨
소스
3

"텍스트를 더 읽기 쉽게 만드는 방법은 무엇입니까?" 요컨대, 당신은하지 않습니다! 색상 조합이 웹 접근성 지침을 충족하지 않으므로 사용해서는 안됩니다. 다른 전경색 또는 배경색을 사용해야합니다. 타겟 잠재 고객이 누구인지에 관계없이 항상 시각 장애가있는 사람들을위한 서비스를 제공해야합니다. 이는 쉬운 해결 방법입니다.

귀하의 색상 조합에 대한 대비 비율은 여기에서 볼 수 있습니다 ... https://snook.ca/technical/colour_contrast/colour.html#fg=FF0000,bg=326598

— 앤드류
소스
2

(댓글이 충분하지 않습니다)

텍스트에 획을 추가 할 수 있습니다. 저는 포토샵 의미에서 "스트로크"라는 용어를 사용하고 있습니다. 기본적으로 텍스트의 테두리 / 개요 색상이 대비로 사용됩니다. 블랙 / 화이트는 괜찮을 것입니다 (특히 스트로크 두께로 연주하는 경우). 특정 음영의 빨강 / 파랑도 효과가있을 것 같습니다.

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