접근성 색상 팔레트 · WCAG 2.2 · 명도 대비 · 중복 단서
접근성 색상 팔레트 만드는 방법
브랜드 색상을 인터페이스 역할로 바꾸고 실제로 맞닿는 전경과 배경을 측정하세요. 포커스와 상태를 색 하나에 맡기지 않고, 시뮬레이션을 수치 검사나 사용자 피드백의 대체물이 아닌 검토 도구로 사용하는 과정입니다.
접근성 색상 팔레트
어떤 색상 팔레트가 접근성을 갖추나요?
접근성 색상 팔레트는 보기 좋은 견본 모음이 아니라 텍스트, 배경, 컨트롤, 포커스, 차트의 실제 조합을 역할에 맞게 검사한 색상 체계입니다. WCAG 2.2 레벨 AA에서 일반 텍스트는 보통 4.5:1 이상, 큰 텍스트는 3:1 이상, 활성 UI나 의미 있는 그래픽을 식별하는 데 필요한 시각 정보는 인접 색상과 3:1 이상이어야 합니다. 의미를 색상만으로 전달해서도 안 됩니다. 각 토큰의 임무와 사용 가능한 접점, 상태, 비색상 단서를 기록하고 임계값을 반올림하지 않아야 접근성 색상 팔레트가 실제 구현에 쓸 수 있는 설계 자산이 됩니다.
접근성 색상 팔레트의 네 가지 원칙
- 접근성 색상 팔레트: 캔버스, 표면, 기본 텍스트, 보조 텍스트, 강조, 경계, 포커스, 성공, 경고, 오류처럼 의미가 있는 역할을 먼저 정합니다
- 접근성 색상 팔레트: 기본, 호버, 포커스, 선택, 오버레이, 다크 테마를 포함해 실제로 맞닿는 전경과 배경 조합을 측정합니다
- 접근성 색상 팔레트: 4.5:1과 3:1을 반올림 가능한 목표가 아닌 최저 기준으로 보고 얇은 글꼴과 실제 디스플레이를 위한 여유를 둡니다
- 접근성 색상 팔레트: 상태와 계열의 의미에 라벨, 아이콘, 밑줄, 모양, 패턴, 위치를 더해 색상 차이가 유일한 지시가 되지 않게 합니다
접근성 색상 팔레트: 인터페이스 역할별 WCAG 2.2 색상 검사
| 인터페이스 용도 | 측정할 조합 | 레벨 AA 기준 | 실무 메모 |
|---|---|---|---|
| 일반 텍스트 · 접근성 색상 팔레트 | 텍스트와 실제 렌더링 배경 | 최소 4.5:1 | 4.499:1을 반올림해 통과시킬 수 없습니다 |
| 큰 텍스트 · 접근성 색상 팔레트 | 큰 텍스트와 실제 배경 | 최소 3:1 | 로마자 기준 일반 18pt 이상 또는 굵은 14pt 이상이며 CJK는 동등한 크기를 판단합니다 |
| 활성 컨트롤과 의미 있는 그래픽 · 접근성 색상 팔레트 | 식별에 필요한 시각 정보와 인접 색상 | 최소 3:1 | 경계, 아이콘, 포커스, 선택 상태와 의미를 전달하는 데이터 표시를 검사합니다 |
| 색상으로 구분한 정보 · 접근성 색상 팔레트 | 색조 차이 외에 남는 의미 | 눈에 보이는 비색상 단서 | 텍스트, 모양, 패턴, 밑줄, 아이콘 또는 위치를 추가합니다 |
접근성 색상 팔레트: 좋아하는 견본이 아니라 역할에서 시작하기
브랜드 팔레트는 정체성을 설명하지만 접근성 색상 팔레트는 결정을 설명합니다. 페이지 캔버스, 떠 있는 표면, 기본 및 보조 텍스트, 링크, 강조, 경계선, 포커스 링, 비활성 처리, 성공, 경고, 오류를 먼저 목록으로 만드세요. 각 역할에 안정적인 토큰 이름을 부여하고 컴포넌트 곳곳에 HEX 값을 직접 흩뿌리지 않습니다. 그다음 어떤 역할끼리 실제로 맞닿는지 기록합니다. 기본 텍스트는 페이지와 카드 양쪽에 올라가며 오류 경계는 입력 필드와 페이지 배경을 동시에 접할 수 있습니다. 이 인접 관계 지도는 모든 색을 흰색에 대해서만 검사한 뒤 실제 제품에서는 반투명, 색이 있는 패널, 이미지, 그라데이션, 다크 모드를 쓰는 실수를 막습니다. 브랜드 견본을 버릴 필요는 없으며 텍스트나 컨트롤 역할을 안전하게 수행하지 못하는 색은 장식 전용으로 제한할 수 있습니다.
접근성 색상 팔레트: 텍스트, 컨트롤, 상태의 조합 행렬 만들기
고립된 색상이 아니라 조합을 검사하세요. 텍스트는 전경, 렌더링된 배경, 글자 크기, 굵기, 상태를 기록합니다. 컨트롤은 구성 요소의 존재와 포커스, 체크, 선택, 펼침, 오류, 호버를 이해하는 데 필요한 시각 정보를 포함합니다. WCAG 비텍스트 대비 기준은 비활성 구성 요소를 예외로 두지만 제품은 비활성 상태도 읽고 알아볼 수 있게 만들 수 있습니다. 알파가 있는 색상은 배경과 합성한 결과를 측정하고 이미지나 그라데이션 위의 텍스트는 현실적으로 가장 불리한 지점을 확인합니다. 결과를 토큰과 함께 보관하면 테마 변경이 접근성 색상 팔레트를 조용히 깨뜨리는 일을 찾을 수 있습니다. 비슷한 회색 두 개가 같은 일을 하지만 하나만 모든 표면에서 통과한다면 더 작고 안전한 체계로 합치는 판단도 쉬워집니다.
접근성 색상 팔레트: 명도 대비와 색상으로 부여한 의미 분리하기
대비와 색상 사용은 서로 다른 질문입니다. 초록색 성공 배지가 충분한 텍스트 대비를 가져도 빨간 오류 배지와의 차이를 초록과 빨강만으로 전달한다면 부족합니다. 색상은 유지하되 단어, 아이콘, 패턴, 구조 차이를 더해 회색조와 다양한 색각에서도 의미가 남게 하세요. 문단 속 링크에는 밑줄이 유용합니다. 차트 계열은 직접 라벨, 서로 다른 표식 모양, 선 스타일, 패턴으로 구분할 수 있습니다. 포커스는 색상 이름을 알아보지 못해도 보여야 합니다. 보색이나 색상환에서 멀리 떨어진 색도 자동으로 접근성을 얻지 않습니다. 색조 거리는 상대 휘도 차이를 보장하지 않고 두 번째 단서를 만들지도 않기 때문입니다. 접근성 색상 팔레트는 기반이고 콘텐츠와 컴포넌트 설계가 의사소통을 완성합니다.
접근성 색상 팔레트 출시 전 확인 목록
- 접근성 색상 팔레트: 각 견본을 의미 역할로 이름 붙이고 사용할 수 있는 표면과 상태를 문서화합니다
- 접근성 색상 팔레트: 일반 텍스트는 렌더링 배경과 4.5:1 이상, 큰 텍스트는 3:1 이상인지 측정합니다
- 접근성 색상 팔레트: 활성 컨트롤 경계, 포커스, 상태 표시와 의미 있는 그래픽은 인접 색상에 대해 3:1 이상인지 측정합니다
- 접근성 색상 팔레트: 기본, 호버, 포커스, 활성, 선택, 오류, 비활성, 오버레이, 다크 테마, 고배율 상태를 확인합니다
- 접근성 색상 팔레트: 색상이 상태나 정체성을 전달할 때 라벨, 모양, 아이콘, 패턴, 밑줄 또는 위치 단서를 추가합니다
- 접근성 색상 팔레트: 조합 행렬, 도구 결과, 컴포넌트 버전, 검토 날짜를 저장해 변경 후 다시 시험합니다
접근성 색상 팔레트: 네 단계로 팔레트 만들고 검증하기
접근성 색상 팔레트: 1. 역할 목록 만들기
접근성 색상 팔레트: 텍스트, 표면, 경계, 컨트롤, 포커스, 데이터, 피드백 역할을 적고 각 테마와 상태에서 맞닿는 조합을 표시합니다.
접근성 색상 팔레트: 2. 후보 생성하기
접근성 색상 팔레트: 색상 조화 도구로 일관된 후보를 찾되 브랜드 선호와 대비 및 의미 전달의 통과 조건을 분리합니다.
접근성 색상 팔레트: 3. 조합 행렬 측정하기
접근성 색상 팔레트: 실제 전경과 인접 배경을 반올림 없이 검사하고 맡은 기준을 놓친 토큰은 교체하거나 용도를 제한합니다.
접근성 색상 팔레트: 4. 전체 상태 검토하기
접근성 색상 팔레트: 대표 색각 차이, 회색조, 키보드 포커스를 보고 실제 컴포넌트를 데스크톱과 모바일 너비에서 검사합니다.
접근성 색상 팔레트: WCAG 2.2가 실제로 정한 내용
- 접근성 색상 팔레트: 성공 기준 1.4.3은 레벨 AA에서 일반 텍스트 4.5:1, 큰 텍스트 3:1을 요구하고 큰 크기를 일반 18pt 또는 굵은 14pt 이상으로 설명하며 임계값을 반올림하지 않습니다. W3C 성공 기준 1.4.3 해설 읽기
- 접근성 색상 팔레트: 성공 기준 1.4.11은 활성 UI, 상태, 의미 있는 그래픽을 식별하는 데 필요한 시각 정보가 인접 색상과 최소 3:1을 이루도록 요구합니다. W3C 성공 기준 1.4.11 해설 읽기
- 접근성 색상 팔레트: 성공 기준 1.4.1은 정보, 동작, 응답, 구분을 색상만으로 전달하지 않게 합니다. 정확한 색 인지가 의미라면 3:1 색 차이가 있어도 다른 표시가 필요합니다. W3C 성공 기준 1.4.1 해설 읽기
“Color is not used as the only visual means of conveying information, indicating an action, prompting a response, or distinguishing a visual element.”
접근성 색상 팔레트 질문
팔레트의 모든 색이 서로 대비되어야 하나요?
접근성 색상 팔레트: 아닙니다. 실제로 맞닿을 조합과 그 역할을 검사합니다. 기본 텍스트는 여러 표면에서 통과해야 하지만 장식 강조색은 텍스트나 컨트롤 식별에 쓰지 않을 수 있습니다. 제한을 기록해 검증하지 않은 관계에 토큰이 재사용되지 않게 하세요. 개별 색상에 준수 여부를 붙이는 것보다 조합 행렬이 정확합니다.
보색은 자동으로 접근성이 있나요?
접근성 색상 팔레트: 아닙니다. 색상환의 반대 위치는 색조 관계이지 WCAG 대비 결과가 아닙니다. 선명한 보색도 상대 휘도가 비슷해 텍스트가 어렵거나 일부 색각에서 구분이 약할 수 있습니다. 조화 도구로 후보를 만든 뒤 명도 대비를 측정하고 의미에는 비색상 단서를 추가하세요.
색각 시뮬레이터가 WCAG 준수를 증명하나요?
접근성 색상 팔레트: 아닙니다. 시뮬레이션은 검토 도구이며 진단, 준수 계산, 장애 사용자 평가의 대체물이 아닙니다. 필요한 조합은 결정적 대비 검사기로 측정하고 중복 단서와 전체 상태를 확인하며 위험에 맞춰 전문가나 사용자 평가를 포함하세요.