Google I/O를 시청해 주셔서 감사합니다. 주문형 콘텐츠를 확인하세요.

이 페이지는 Cloud Translation API를 통해 번역되었습니다.

색상 및 대비

화면에 표시된 텍스트를 읽으려고 했는데 컴퓨터 화면에 표시된 문자 메시지에 화면을 매우 밝거나 어떻게 해야 할까요? 또는 더 영구적인 색을 가진 사람일 수도 있습니다. 3억 명에 달하는 색맹인과 같이 또는 저시력자 2억 5,300만 명에 관한 것입니다.

디자이너 또는 개발자는 사람들이 색상을 어떻게 인식하는지 이해해야 합니다. 대비되는 것이 중요합니다 이렇게 하면 그들의 시각적 요구를 가장 잘 지원할 수 있습니다.

이 모듈에서는 접근성 높은 색상 및 대비 기본사항을 몇 가지 소개합니다.

인지 색상

물체는 색깔은 없지만 빛의 파장을 반사한다는 사실을 알고 계셨나요? 조명? 색을 보면 눈은 그 파장을 받아 처리하고 색상으로 변환할 수 있습니다.

디지털 접근성과 관련하여, 우리는 이러한 파장에 대해 이야기합니다. 색상, 채도, 밝기 조건 (HSL)을 사용합니다. HSL 모델은 인간이 눈에서 색을 입히는 방식과 더 밀접하게 색상을 인식합니다.

색조는 빨간색, 녹색, 파란색과 같은 색상을 정성적으로 설명하는 방법입니다. 각 색조에는 색상 스펙트럼에서 특정 위치에 해당하는 빨간색은 0, 녹색은 120, 파란색은 240으로 나타냅니다.

채도는 색상의 강도이며 0%에서 0% 사이의 백분율로 측정됩니다. 100%로 설정할 수 있습니다 완전한 채도 (100%)인 색상은 매우 선명하지만 채도가 없으면 (0%) 회색조 또는 흑백이 됩니다.

밝기는 색상의 밝은 문자 또는 어두운 문자로, 백분율로 측정됩니다. 0% (검은색)에서 100% (흰색)까지 조정할 수 있습니다.

색상 대비 측정

WAI 그룹은 다양한 시각 장애가 있는 사람들을 지원하기 위해 색상 대비 공식을 사용하여 충분한 대비가 있는지 확인 추가할 수 있습니다. 이러한 색상 명암비가 이에 따라 시력이 약간 약한 사용자도 배경에서 텍스트를 읽을 수 있습니다. 대조군을 만들 수 있습니다.

선명한 색상 팔레트가 있는 이미지를 살펴보고 이 이미지가 은 특정 형태의 색맹인 사용자에게 표시될 수 있습니다.

원래 무지개 샌드예요. — </ph> 사진: Alexander Grey, Unsplash

를 통해 개인정보처리방침을 정의할 수 있습니다. <ph type="x-smartling-placeholder">

원래 무지개 패턴입니다. — </ph> 사진: Clark Van Der Beken, Unsplash

왼쪽의 이미지에 보라색, 빨간색, 주황색, 노란색, 아쿠아 녹색, 연한 파란색, 진한 파란색의 무지개 모래가 있습니다. 오른쪽에는 더 밝은 여러 색상의 무지개 패턴이 있습니다.

녹색맹

녹색맹 일반적으로 그린 블라인드라고 함)은 남성의 1~5%, 여성.

녹색맹 환자는 초록색 빛에 대한 민감도가 낮습니다. 이 색맹 필터는 이러한 유형의 색맹을 시뮬레이션합니다.

적색맹

적색맹 일반적으로 적색맹이라고 함)은 남성의 1.01~1.08%와 여성의 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

텍스트 이미지를 포함하여 일반 크기의 텍스트는 색상 명암비를 가져야 합니다. 4.5:1의 값을 사용하여 색상에 대한 최소 WCAG 요구사항. 큰 텍스트와 필수 아이콘의 색상 명암비는 3:1이어야 합니다. 대형 텍스트는 최소 18pt / 24px 또는 14pt / 18.5px 굵게 이 색상에서 로고와 장식 요소는 제외됩니다. 대비 요구사항을 충족해야 합니다.

다행히 학습에 성공하는 데 도움이 되는 도구가 많기 때문에 고급 수학이 필요하지 않습니다. 색상 대비 계산을 자동으로 수행합니다. 다음과 같은 도구 Adobe Color 색 대비 분석기, 레오나르도, Chrome의 DevTools 색상 선택 도구 색상 명암비를 빠르게 알려주고 색상 대비율을 높이는 데 도움이 되는 가장 포괄적인 색상 쌍과 팔레트를 만들 수 있습니다.

색상 사용

적절한 색상 대비 수준이 없는 경우, 단어, 아이콘 및 기타 그래픽이 발견하기 어렵고, 금방 디자인에 접근할 수 없게 됩니다 하지만 광고 비용을 지불할 때 색상이 사용되는 방법에 주의를 기울이세요. 색상만 사용하여 정보, 작업 또는 콘텐츠를 전달할 수 시각적 요소를 구별할 수 있습니다.

예를 들어 "계속하려면 녹색 버튼을 클릭하세요"라고 말하면 버튼에 추가 콘텐츠나 식별자를 생략하면 특정 유형의 색맹인 사용자가 어떤 버튼을 클릭합니다. 마찬가지로 많은 그래프, 차트 및 표는 확인할 수 있습니다 패턴, 텍스트, 아이콘과 같은 식별자를 추가하는 것은 매우 중요합니다.

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

색상 중심 미디어 쿼리

색상 대비율과 화면의 색상 사용을 확인하는 것 외에도 점점 더 많이 사용되고 지원되고 있는 미디어 검색어로 사용자에게 제공할 수 있는 더 세밀하게 제어할 수 있습니다.

예를 들어 @prefers-color-scheme 미디어 쿼리를 사용하면 광선 혐오나 빛에 민감한 사용자에게 도움이 되는 어두운 테마를 만들 수 있습니다. 색이 부족하고 대비 민감도가 있는 사용자를 지원하는 @prefers-contrast로 고대비 테마를 만들 수도 있습니다.

색 구성표 선호

브라우저 지원

<ph type="x-smartling-placeholder">
<ph type="x-smartling-placeholder">
<ph type="x-smartling-placeholder">
<ph type="x-smartling-placeholder">

소스

미디어 쿼리 @prefers-color-scheme를 통해 사용자는 조명 또는 어두운 테마의 버전이 있는 사용자에게 광고를 게재합니다. 이 테마 변경은 밝은/어두움 환경설정 설정을 변경하고 이 미디어 쿼리를 지원하는 브라우저로 이동 검토: Mac 및 어두운 모드용 Windows 안내

밝은 모드와 어두운 모드를 비교합니다.

를 통해 개인정보처리방침을 정의할 수 있습니다. <ph type="x-smartling-placeholder">

대비 선호

브라우저 지원

<ph type="x-smartling-placeholder">
<ph type="x-smartling-placeholder">
<ph type="x-smartling-placeholder">
<ph type="x-smartling-placeholder">

소스

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

일반 및 고대비 비교

대비 환경설정이 없는 밝은 모드의 코드 예 — 밝은 모드, 대비 환경설정 없음.

를 통해 개인정보처리방침을 정의할 수 있습니다. <ph type="x-smartling-placeholder">

고대비 환경설정을 사용하는 어두운 모드의 코드 예 — 어두운 모드, 고대비 환경설정

미디어 쿼리 계층화

색상 중심 미디어 검색어를 여러 개 사용하여 사용자에게 더 많은 정보를 제공할 수 있습니다. 선택할 수 있습니다 이 예에서는 @prefers-color-scheme를 스택하고 @prefers-contrast 함께 사용할 수 있습니다.

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

를 통해 개인정보처리방침을 정의할 수 있습니다. <ph type="x-smartling-placeholder">

를 통해 개인정보처리방침을 정의할 수 있습니다. <ph type="x-smartling-placeholder">

이해도 확인

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

색상만으로는 문서화를 위한 충분한 식별자가 아닙니다. 독자가 UI 요소를 식별하는 데 도움이 되는 다른 사항은 무엇인가요?

패턴

정답이 아닙니다. 패턴만으로는 사용자가 UI 요소를 식별하는 데 도움을 줄 수 없습니다.

텍스트

정답이 아닙니다. 텍스트만으로는 사용자가 UI 요소를 식별하는 데 충분하지 않을 수 있습니다.

아이콘

정답이 아닙니다. 아이콘만으로는 사용자가 UI 요소를 식별하는 데 도움이 되지 않습니다.

위 항목 모두

예. 식별자가 둘 이상 있으면 사용자가 UI 요소를 식별하는 데 도움이 됩니다.