색상 및 대비

화면에서 텍스트를 읽으려고 할 때 색 구성표로 인해 읽기 어렵거나 매우 밝거나 조명이 어두운 환경에서 화면을 보는 데 어려움을 겪은 적이 있나요? 아니면 색맹인 약 3억 명이나 저시력자 2억 5, 300만 명과 같이 보다 영구적인 색각 문제를 겪고 계시나요?

디자이너 또는 개발자는 사람들이 색상과 대비를 일시적, 상황적 또는 영구적으로 인식하는 방식을 이해해야 합니다. 이렇게 하면 어린이의 시각적 요구사항을 가장 잘 지원할 수 있습니다.

이 모듈에서는 접근성이 우수한 색상 및 대비 기본사항을 소개합니다.

색상 인식

물체는 색은 보유하지 않고 빛의 파장을 반사한다는 사실을 알고 계셨나요? 색상을 볼 때 눈은 그 파장을 받아 처리하여 색상으로 변환합니다.

디지털 접근성과 관련하여 Google은 이러한 파장을 색조, 채도, 밝기 (HSL) 측면에서 말합니다. HSL 모델은 RGB 색상 모델의 대안으로 만들어졌으며 인간이 색상을 인식하는 방식과 더욱 밀접하게 일치합니다.

색조는 색상(빨간색, 녹색, 파란색)을 정성적으로 설명하는 방식으로

채도는 색상의 강도로, 0~100%의 백분율로 측정됩니다. 최대 채도가 100%인 색상은 매우 생생하고 채도가 없는(0%) 색상은 그레이 스케일 또는 흑백입니다.

밝기는 색상의 밝은 또는 어두운 특성으로, 0% (검은색)~100% (흰색)의 백분율로 측정됩니다.

색상 대비 측정

다양한 시각 장애가 있는 사람들을 지원하기 위해 WAI 그룹은 텍스트와 배경이 충분히 대비되도록 색상 대비 공식을 만들었습니다. 이러한 색상 명암비를 따르면 시력이 약한 사용자가 대비 보정 보조 기술 없이도 배경에서 텍스트를 읽을 수 있습니다.

선명한 색상 팔레트가 적용된 이미지를 살펴보고 특정 형태의 색맹인 사용자에게 이미지가 어떻게 표시되는지 비교해 보겠습니다.

왼쪽의 이미지에 보라색, 빨간색, 주황색, 노란색, 청록색, 하늘색, 진한 파란색의 무지개 모래가 표시되어 있습니다. 오른쪽에는 더 밝은 여러 색상의 무지개 패턴이 있습니다.

제2색맹

녹색맹(보통 녹색맹)은 남성의 1% ~5%, 여성의 0.35% ~0.1% 에서 발생합니다.

제2색맹 환자는 녹색광에 대한 민감도가 감소합니다. 이 색맹 필터는 이러한 유형의 색맹이 어떻게 보이는지 시뮬레이션합니다.

적색맹

적색맹(흔히 적색맹)은 남성의 1.01% ~1.08%, 여성 0.03% 의 0.02% 에게 발생합니다.

적색맹 환자는 빨간색 빛에 대한 민감도가 감소합니다. 이 색맹 필터는 이러한 유형의 색맹이 어떻게 보이는지 시뮬레이션합니다.

색맹 또는 단색

색맹 (또는 완전 색맹)은 매우 드물게 발생합니다.

색맹 또는 단색증이 있는 사람은 빨간색, 녹색 또는 파란색 빛을 거의 인식하지 못합니다. 이 색맹 필터는 이러한 유형의 색맹이 어떻게 보이는지 시뮬레이션합니다.

색상 대비 계산

색상 대비 수식은 색상의 상대 휘도를 사용하여 대비를 확인하는 데 도움을 줍니다. 대비 범위는 1~21입니다. 이 수식은 주로 [color value]:1로 축약됩니다. 예를 들어 순수한 흰색과 순수한 검은색은 21:1에서 색상 대비율이 가장 큽니다.

(L1 + 0.05) / (L2 + 0.05)
L1 is the relative luminance of the lighter color
L2 is the relative luminance of the darker colors

텍스트 이미지를 포함하여 일반 크기의 텍스트는 색상에 관한 최소 WCAG 요구사항을 통과하려면 4.5:1의 색상 대비율을 보유해야 합니다. 큰 크기의 텍스트와 필수 아이콘은 색상 대비율이 3:1여야 합니다. 큰 크기의 텍스트는 최소 18pt / 24px 또는 14pt/18.5px로 굵게 표시되어야 한다는 특징이 있습니다. 로고와 장식 요소는 이러한 색상 대비 요구사항에서 제외됩니다.

다행히 색상 대비를 계산하는 도구가 많으므로 고급 수학은 필요하지 않습니다. Adobe Color, Color Contrast Analyzer, Leonardo, Chrome의 DevTools 색상 선택 도구와 같은 도구를 사용해 빠르게 색상 대비율을 알려주고 가장 포괄적인 색상 쌍과 팔레트를 만드는 데 도움이 되는 추천을 제공할 수 있습니다.

색상 사용

적절한 색상 대비 수준이 없으면 단어, 아이콘 및 기타 그래픽 요소를 발견하기 어렵고 디자인에 금방 액세스하지 못할 수 있습니다. 그러나 화면에서 색상이 사용되는 방식에도 주의를 기울이는 것이 중요합니다. 색상만 사용하여 정보나 작업을 전달하거나 시각적 요소를 구별할 수는 없기 때문입니다.

예를 들어 '계속하려면 녹색 버튼을 클릭하세요'라고 말했지만 버튼에 추가 콘텐츠나 식별자를 생략하면 특정 유형의 색맹인 사용자가 어떤 버튼을 클릭해야 하는지 알기 어려울 수 있습니다. 마찬가지로 많은 그래프, 차트, 표는 색상만 사용하여 정보를 전달합니다. 패턴, 텍스트, 아이콘과 같은 다른 식별자를 추가하는 것은 사용자가 콘텐츠를 이해하는 데 중요합니다.

디지털 제품을 그레이 스케일로 검토하면 잠재적인 색상 문제를 신속하게 감지할 수 있습니다.

색상 중심 미디어 쿼리

색상 대비율과 화면의 색상을 사용하는 것 외에 사용자가 화면에 표시되는 내용을 더 세밀하게 제어할 수 있도록 하는 지원 인기 미디어 쿼리를 적용하는 것을 고려해야 합니다.

예를 들어 @prefers-color-scheme 미디어 쿼리를 사용하여 어두운 테마를 만들 수 있습니다. 이는 광선 혐오증 또는 빛에 민감한 사용자에게 도움이 될 수 있습니다. @prefers-contrast를 사용하여 고대비 테마를 빌드할 수도 있습니다. 이 테마는 색상 결여 및 대비 민감도가 있는 사용자를 지원합니다.

색 구성표 선호

미디어 쿼리 @prefers-color-scheme를 사용하면 사용자가 방문하는 웹사이트 또는 앱의 밝은 테마 또는 어두운 테마 버전을 선택할 수 있습니다. 밝은/어두운 환경설정 설정을 변경하고 이 미디어 쿼리를 지원하는 브라우저로 이동하여 이 테마 변경사항이 실제로 적용되는 것을 확인할 수 있습니다. 어두운 모드에 관한 Mac 및 Windows 안내를 참고하세요.

대비 선호

@prefers-contrast 미디어 쿼리는 사용자의 OS 설정을 확인하여 고대비가 사용 설정 또는 사용 중지되었는지 확인합니다. 대비 환경설정 설정을 변경하고 이 미디어 쿼리를 지원하는 브라우저(Mac 및 Windows 대비 모드 설정)로 이동하면 이 테마 변경사항이 작동하는 것을 확인할 수 있습니다.

미디어 쿼리 계층화

색상 중심의 미디어 쿼리 여러 개를 사용하여 사용자에게 더 많은 옵션을 제공할 수 있습니다. 이 예에서는 @prefers-color-scheme와 @prefers-contrast를 함께 스택했습니다.

학습 내용 확인하기

색상 및 대비에 관한 지식 테스트