색만 써서 메시지를 전달하지 마세요.

색상으로 정보를 강조하면 좋습니다.그것들은 내용을 구분하고 식별하기 쉬우며 사용자를 더욱 유행하게 하는 데 도움이 된다.그러나 그것은 현재 내용을 지원하고 강화하는 보조기가 되어야 한다something that provides all the information.
일부 시력, 색맹 또는 시력 결함을 앓고 있는 사람may have problems differentiating certain colors.만약 모든 정보가 색을 기반으로 한다면, 그들은 그것에 접근할 수 없을 것이다.
다음 예제를 통해 이 점을 설명합니다.
마우스를 이 케이크 그림에 걸고 회색으로 표시합니다
이것은 떡그림으로 많든 적든 색깔을 구분하기 쉽지만, 마우스를 멈추면 회색 혼란으로 변한다.
그림은 가장자리 상황처럼 보일 수도 있지만, 우리는 매일 많은 다른 요소와 구성 요소를 사용하고 있으며, 비슷한 문제가 존재할 수도 있다.예:

경고/Toast 메시지는 유형을 지정하지 않는 한 구분하기 어려울 수 있습니다.

필수/잘못된 필드는 빨간색보다 더 설명적이어야 합니다.

링크는 주위의 텍스트에서 팝업해야 합니다...모든 것이 그레이스케일이라도.

액세스할 수 없는 어셈블리의 다른 예
이 문제들을 해결하기 위해 서로 다른 기술이 있다.이 모든 것은 색깔로만 내용을 강조해야 하는 것이 아니라 이런 생각에 기초를 두고 있다.

이미지 또는 아이콘을 추가합니다.

에 텍스트 표시자를 추가합니다.

다른 유형의 시각 표시기를 추가합니다.

배경 패턴을 추가합니다.

상술한 부분을 결합하여...

우리는 다음 몇 절에서 그것들을 더욱 상세하게 이해합시다.

시각 표시기 또는 아이콘 추가

어떤 경우, 내용 옆에 아이콘이나 이미지를 추가하는 것이 좋은 해결 방안일 수도 있다.그것은 색깔의 사용을 촉진하여 정보를 전달할 뿐만 아니라, 상당히 쉽게 실현될 것이다.
주식 시세는 이 문제와 해결 방안의 전형적인 예이다.주가가 오르면 녹색, 주가가 떨어지면 빨간색으로 표시됩니다.일부 시력이나 색맹 사용자에게 이것은 좋은 일이 아닐 수도 있다.

그레이스케일에서 어느 주식이 오르든 내리든 알기는 결코 쉽지 않다
우리는 communicate textually or visually what each color means가 필요하다.주식 시세기에 대해 위쪽 또는 아래쪽 화살표는 다음과 같다.

아이콘은 모든 사람이 쉽게 이해할 수 있도록 정보를 제공한다
위/아래 시각 표시기를 추가하면 값의 변화를 추가하고 내용을 쉽게 접근할 수 있습니다.
CSS에서는 실제 이미지를 사용하거나 유니코드 문자로 설정하여 위조 요소 ::before 및 ::after 를 사용하여 아이콘을 추가할 수 있습니다.

/* Option 1: adding an actual icon */
.price.positive::before {
  content: "";
  display: inline-block;
  width: 1em;
  height: 1em;
  background: url(up.png);
  background-size: cover;
}

/* Option 2: using directly the content */
.price.positive::before {
  content: "▲";
}
.price.negative::before {
  content: "▼";
}

Note that this could be achieved by adding the image using HTML, but this series is focused on accessibility using CSS.

어떤 경우 이 아이콘을 사용하면 내용의 존재를 충분히 나타낼 수 있습니다(예를 들어 외부 아이콘과의 링크).

텍스트 표시자 추가

이것은 일부 양식 필드와 상태를 강조 표시하는 데 도움이 됩니다(예: 오류가 발생했을 때).

오류 설명 및 수정 방법이 포함된 텍스트 추가
CSS 구현은 HTML에 따라 결정됩니다.그러나 전반적으로 상술한 기술과 유사한 기술이 될 것이다.아이콘이나 이미지가 아닌 텍스트만 사용하십시오.

Note: although textual cues can be added with pseudo-elements in CSS, it is better to do it directly in HTML as that text may not be accessible to some users through their assistive technology.

추가 시각 표시기 추가

모든 시각 표시기가 텍스트나 이미지여야 하는 것은 아닙니다.모든 사용자가 이해할 수 있고 사용할 수 있는 확장성도 있다.
이 분야의 몇 가지 예:

링크에는 일반적으로 밑줄이 있습니다.

필수 필드는 레이블 옆에 별표*가 있습니다.

버튼에는 테두리 또는 엔티티 컨텐트가 있습니다.

경계를 입력합니다...

예:

밑줄 친 링크가 텍스트에서 팝업
첫 번째 단락의 링크는 밑줄이 없기 때문에 시각적 결함이 있는 사람에게는 주위의 일반적인 텍스트와 구분하기 어려울 수 있다.
이것은 정상적인 상태에서 밑줄을 친 링크의 CSS 예제이지만, 우리는 멈출 때 밑줄을 삭제합니다.

a, a:link {
  text-decoration: underline;
}

a:hover {
  text-decoration: none;
}

위의 또 다른 예는 필수 필드의 탭 옆에 별표 * 가 있다는 것이다.이를 위해 우리는 ::before 또는 ::after 위조 원소를 사용할 수 있다.

label.required-field::after {
  content: "*";
}

배경 패턴 추가

이것은 도형과 도표에 매우 도움이 된다...이것은 JavaScript/SVG/HTML 유형의 것과 더욱 비슷하다.하지만 CSS는 아직 할 말이 있을 거예요.
이 생각은 색깔이 있어야 하는 것이 아니라 그림을 추가해서 각 부분을 구분해야 한다는 것이다.이렇게 하면 색맹 환자는 각 부분을 더욱 잘 구분할 수 있다.

배경 패턴이 있는 부분은 도형에서 더욱 쉽게 구분된다
전체 모드를 도면에 추가하려면 JavaScript가 약간 필요할 수도 있지만 도면 앞에 확인란을 추가하고 ~ 조합기를 사용하여 CSS와 HTML을 사용할 수 있습니다.
여기에 사용되는 CSS는 배경 이미지와 동일합니다.

.chart .section {
  background-image: url(pattern.png);
}

색깔로만 메시지를 전달하지 마라.