색상 및 대비

화면의 텍스트를 읽으려고 하는데 색 구성표 때문에 읽기 어렵거나 매우 밝거나 어두운 환경에서 화면을 보기 어려웠던 적이 있나요? 아니면 색맹인 3억 명 또는 저시력인 2억 5, 300만 명과 같이 영구적인 색각 문제가 있는 사람일 수도 있습니다.

디자이너나 개발자는 일시적, 상황적, 영구적 등 다양한 상황에서 사람들이 색상과 대비를 어떻게 인식하는지 이해해야 합니다. 이를 통해 시각적 요구사항을 가장 잘 지원할 수 있습니다.

이 모듈에서는 접근성 있는 색상과 대비의 기본사항을 소개합니다.

색상 인식

물체는 색상을 가지고 있는 것이 아니라 빛의 파장을 반사한다는 사실을 알고 계셨나요? 색깔을 보면 눈이 해당 파장을 수신하고 처리하여 색깔로 변환합니다.

디지털 접근성에서는 이러한 파장을 색조, 채도, 명도 (HSL)로 표현합니다. HSL 모델은 RGB 색상 모델의 대안으로 만들어졌으며 사람이 색상을 인식하는 방식과 더 밀접하게 관련되어 있습니다.

색조는 빨간색, 녹색, 파란색과 같은 색상을 설명하는 정성적 방법으로, 각 색조는 색상 스펙트럼에서 특정 지점을 가지며 값은 0~360입니다(빨간색은 0, 녹색은 120, 파란색은 240).

채도는 색상의 강도로, 0%~100%의 백분율로 측정됩니다. 채도가 100%인 색상은 매우 선명하며 채도가 0%인 색상은 그레이 스케일 또는 흑백입니다.

명도는 색상의 밝기 또는 어두운 정도를 나타내며, 0% (검은색)에서 100% (흰색)까지의 백분율로 측정됩니다.

색상 대비 측정

다양한 시각 장애인을 지원하기 위해 WAI 그룹은 텍스트와 배경 간에 충분한 대비가 존재하도록 색상 대비 공식을 만들었습니다. 이러한 색상 대비 비율을 따르면 시력이 중간 정도 낮은 사용자는 대비를 향상하는 보조 기술 없이도 배경의 텍스트를 읽을 수 있습니다.

생생한 색상 팔레트가 적용된 이미지를 살펴보고 특정 형태의 색맹이 있는 사용자에게는 이미지가 어떻게 표시되는지 비교해 보세요.

왼쪽에는 보라색, 빨간색, 주황색, 노란색, 아쿠아 그린색, 밝은 파란색, 진한 파란색의 무지개 모래가 표시되어 있습니다. 오른쪽에는 더 밝은 다색 무지개 패턴이 있습니다.

녹색맹

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

녹색맹이 있는 사람은 녹색 광선에 대한 민감도가 감소합니다. 이 색맹 필터는 이러한 유형의 색맹이 어떻게 표시되는지 시뮬레이션합니다.

적색맹

적색맹(일반적으로 빨간색 맹이라고 함)은 남성의 1.01~1.08%, 여성의 0.02~0.03%에서 발생합니다.

적색맹이 있는 사람은 적색 광선에 대한 민감도가 감소합니다. 이 색맹 필터는 이러한 유형의 색맹이 어떻게 표시되는지 시뮬레이션합니다.

색맹 또는 전색맹

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

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

색상 대비 계산

색상 대비 공식은 색상의 상대 휘도를 사용하여 대비를 결정하며, 대비는 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를 함께 쌓았습니다.

색상과 대비를 모두 비교합니다.