Eojin Han

색상과 대조

디지털 접근성에서 색상(color)과 대비(contrast)는 사용자들이 화면을 읽고 이해하는 데 중요한 요소

색상과 명도 대비의 중요성

✅ 화면을 읽기 어려운 경험

특정 색상 조합이 가독성을 떨어뜨릴 수 있음

밝거나 어두운 환경에서 화면을 보기 어려운 경우 발생

색각 이상(약 3억 명) 또는 저시력(약 2억 5,300만 명) 사용자들에게 더 큰 문제

✅ 디자이너 & 개발자가 알아야 할 점

색상과 대비가 어떻게 인식되는지 이해해야 함

일시적, 상황적, 영구적인 시각적 어려움을 고려

보다 접근성 높은 디자인을 제공하는 것이 중요

🎨 이 모듈에서는 접근 가능한 색상 및 명도 대비의 기본 개념을 소개합니다.

1. 색상 인식

색상: 색상은 빛의 파장이 반사되는 방식에 의해 결정됩니다. 인간의 눈은 이 파장을 받아들이고 색으로 변환합니다.

HSL 모델: 색상의 색조(Hue), 채도(Saturation), 명도(Lightness)로 설명됩니다. 이 모델은 사람이 색을 인식하는 방식에 더 가까운 방식으로 색을 표현합니다.

색조(Hue): 색상의 종류 (예: 빨강, 초록, 파랑).

0~360 사이의 스펙트럼 내의 특정 숫자를 지님 (red: 0, green: 120, blue: 240)

채도(Saturation): 색의 강도

0%~100% 사이의 퍼센트 값. (100% : very vivid, 0%: grayscale)

명도(Lightness): 색의 밝기

0%~100% 사이의 퍼센트 값. (0% : black, 100%: white)

2. 색상 대비 측정

다양한 시각 장애가 있는 사용자를 지원하기 위해 WAI 그룹은 텍스트와 배경 사이에 충분한 대비가 존재하도록 색상 대비 수식을 만들었습니다.

이러한 색상 대비율을 따르면 시력이 약간 저하된 사용자는 대비 향상 보조 기술(AT) 없이도 배경의 텍스트를 읽을 수 있습니다.

먼저 색맹들의 시선을 알아보자

색상 대비율 계산

색상 대비 공식은 색상의 상대 휘도(relative luminance)(0: darkest black, 1: lightest white)를 사용하여 대비를 결정하고, 비율이 클수록 대비가 강합니다.

대비는 1~21 사이의 값을 가질 수 있습니다.

이 수식은 [color value]:1로 줄여서 표기하는 경우가 많습니다.

예를 들어 순수한 검은색과 순수한 흰색의 색상 대비율은 21:1로 가장 큽니다.

최소 요구 사항: 색상에 관한 최소 WCAG 요구사항을 통과하려면

일반 텍스트는 4.5:1 이상의 대비 비율이 필요.

큰 텍스트와 필수 아이콘의 색상 대비율은 3:1 여야 한다.

대형 텍스트는 bold 18pt/24px 이상 또는 regular 14pt/18.5px 이상 되어야 함.

로고와 장식 요소는 제외됨.

색상 대비 계산 도구: 수학과 수식에 대해 알 필요 없이 도구를 활용하자.

Adobe Color, Color Contrast Analyzer, Leonardo, Chrome의 DevTools 색상 선택 도구

3. 색상 사용

색상만으로 정보를 전달하면 색맹을 가진 사람들이 이해하기 어려울 수 있습니다.

그래프, 차트, 표 에서 색상만 사용하여 정보를 전달하는 경우
예를 들어, "녹색 버튼을 클릭하여 계속 진행하세요"라는 지시만 주면 색맹 사용자는 어느 버튼을 클릭해야 할지 모를 수 있습니다.

패턴, 텍스트, 아이콘 등의 추가 식별자를 사용하는 것이 좋습니다.

📌

디지털 제품을 그레이 스케일로 검토하면 잠재적인 색상 문제를 빠르게 감지할 수 있습니다. (전색맹 기준으로 바라보고 이해가 안되는 부분이 있다면 개선해야 함)

색상을 구분할 수 없더라도, 패턴과 텍스트 설명을 통해 위 그래프를 이해할 수 있다.

여기서 패턴이 없었다면 전색맹이 경우에는 그래프를 읽을 수 없었을 것이다.

4. 미디어 쿼리

사용자에게 화면에 표시되는 항목을 더 세부적으로 제어할 수 있는 미디어 쿼리를 적용하는 것이 좋습니다.

미디어 쿼리는 점점 더 많이 사용되고 지원되고 있습니다.

예시)

@prefers-color-scheme: 사용자에게 어두운 테마 또는 밝은 테마를 선택할 수 있게 합니다.

광선공포증 또는 광과민성이 있는 사용자는 다크모드를 사용할 수 있음.

@prefers-contrast: 사용자가 고대비 모드를 활성화하면, 그에 맞는 디자인을 제공합니다.

색상 결핍 및 대비 민감도가 있는 사용자를 위해 고대비 테마를 빌드할 수 있음.

이 두 가지 미디어 쿼리를 조합하여 더욱 다양한 옵션을 제공할 수 있습니다.

결론

디자인이나 개발 시 색상과 대비를 고려하여 다양한 사용자의 시각적 요구를 충족시키는 것이 중요합니다. 또한, 색상만으로 정보를 전달하지 않고, 다른 시각적 식별 요소를 추가하는 것이 접근성을 높이는 데 도움을 줍니다.