coastdigitalgroup/coastai-skills

접근 가능한 색상 시스템

목적

Accessible Color System 스킬은 시각적으로 조화롭고 기능적으로 접근 가능한 컬러 팔레트를 생성하기 위한 방법론을 제공합니다. 단순한 미적 색상 선택을 넘어, 구조화된 단계별 스케일, 대비 안전 페어링, 의미론적 적용을 통해 저시력을 포함한 모든 사용자가 콘텐츠를 인지할 수 있도록 보장합니다.

사용 사례

• 새로운 브랜드의 디지털 색상 체계 수립
• 기존 웹사이트의 색상 관련 접근성 문제 감사 및 수정
• 다크/라이트 모드 테마 설계
• 피드백(성공, 오류, 경고)을 위한 의미론적 색상 정의

사용하지 말아야 할 경우

• 예술 중심 경험: 색상이 순수한 표현을 위해 사용되며 기능적 정보를 전달하지 않는 경우 (단, 접근성은 여전히 권장됨)
• 하드 코딩된 레거시 앱: 기술 부채로 인해 변수 시스템 구현이 불가능한 경우 (대신 개별 수정에 집중)
• 순수 장식 요소: 텍스트나 상호작용 컴포넌트를 포함하지 않는 배경 패턴과 같은 요소 (WCAG 1.4.3은 여기에 적용되지 않음)

입력값

접근 가능한 색상 시스템을 생성하려면 다음이 필요합니다:

1. 기본 브랜드 색상: 브랜드를 식별하는 핵심 색상 (예: #0055FF)
2. 중립 기준: 회색/검정의 시작점 (예: #1A1A1A 또는 약간 색조가 들어간 중립)
3. 접근성 목표: WCAG 레벨 AA (표준) 또는 AAA (향상)
4. 사용 맥락: 고밀도 대시보드, 마케팅 랜딩 페이지, 유틸리티 우선 애플리케이션 중 어디에 사용되는가?

출력값

1. 색상 스케일: 기본, 보조, 중립, 의미론적 색상에 대한 톤 팔레트 (보통 10단계 스케일)
2. 대비 매트릭스: 어떤 전경색이 어떤 배경색에 안전하게 사용될 수 있는지 보여주는 맵
3. 의미론적 매핑: 색상에 대한 정의된 역할 (예: --color-action-primary, --color-surface-muted)
4. CSS 사용자 정의 속성: 각 상태 색상을 수동으로 선택하는 대신 단일 기본 토큰에서 호버/활성 색조를 도출하기 위해 color-mix()를 선택적으로 사용하는, 프로덕션 준비가 된 CSS 변수 블록

워크플로우

1. 톤 스케일 생성

기본 색상을 스케일로 확장합니다 (예: 50에서 900). 일관된 명도 단계를 유지하는 도구나 공식을 사용하세요. HSL보다 OKLCH 색상 공간에서 작업하면 색상 전반에 걸쳐 지각적으로 더 균일한 명도 단계를 생성하므로, 테스트하기 전에 대비를 예측하기가 더 쉽습니다. 팁: Primary 500 또는 600이 "브랜드" 버전인지 확인하세요.

2. 중립색 정의

중립 스케일을 만듭니다. 더 응집력 있는 느낌을 위해 중립색에 기본 색상을 소량 (예: 2-5%) "틴팅"하는 것을 고려하세요.

3. 의미론적 역할 설정

기능적 역할에 색상을 할당합니다:

• 동작: 버튼, 링크, 활성 상태를 위한 기본 색상
• 표면: 배경, 카드, 구분선 (중립색)
• 콘텐츠: 텍스트 및 아이콘 (고대비 중립색)
• 상태: 성공 (초록), 경고 (노랑/주황), 오류 (빨강), 정보 (파랑)

4. 대비 검증 수행

WCAG 공식 (1.4.3, 1.4.11)을 사용하여 페어링을 테스트합니다:

• 일반 텍스트: AA 4.5:1, AAA 7:1
• 큰 텍스트 (>18pt): AA 3:1, AAA 4.5:1
• UI 컴포넌트/아이콘: AA 3:1 (비텍스트 대비, 1.4.11)
• 포커스 표시기: 인접 색상 대비 3:1, 표시기가 고정 헤더나 다른 콘텐츠에 의해 가려지지 않아야 함 (WCAG 2.2 SC 2.4.11, 포커스 비가림)

5. 페어링 규칙 생성

어떤 텍스트 색상이 어떤 배경에 사용될 수 있는지 문서화합니다. 예: 흰색 텍스트 (#FFFFFF)는 Primary 600 이상에서만 안전합니다.

결정 규칙

• 가독성 우선: 기능 (가독성)이 항상 미학보다 우선합니다. 브랜드 색상이 텍스트에 너무 밝으면 텍스트에는 더 어두운 변형을 사용하고 브랜드 색상은 장식 요소에 유지합니다.
• 색상 단독 사용 금지: 정보를 전달하는 유일한 방법으로 색상에 의존하지 마십시오 (예: 오류 메시지에 아이콘이나 텍스트 레이블 포함).
• 일관된 명도: 동일한 스케일 레벨에서 서로 다른 색상 간에 명도 값을 비슷하게 유지합니다 (예: Red 500과 Blue 500은 유사한 지각적 밝기를 가져야 함).

제약 조건

• 반응형: 모바일 화면에서 눈부심이나 저품질 디스플레이로 가시성이 저하될 수 있으므로 색상이 대비를 유지해야 합니다.
• 접근성: 포커스 표시기가 보이고 가려지지 않아야 한다는 2.4.11 요구 사항을 포함하여 모든 기능 요소에 대해 최소 WCAG 2.2 AA 기준을 충족해야 합니다.
• 계층구조: 색상 채도와 대비를 사용하여 시선을 유도합니다. 더 중요한 요소(CTA)는 더 높은 시각적 무게를 가져야 합니다.

일반적인 실패 패턴

• 불충분한 대비: 흰색 배경에 밝은 회색 텍스트를 사용하거나 밝은 브랜드 색상에 흰색 텍스트를 사용하는 경우
• 진동하는 색상: 시각적 피로를 유발하는 고채도 색상(예: 빨강과 초록)을 페어링하는 경우
• 너무 많은 색상: 브랜드 정체성을 약화시키고 계층 구조를 혼란스럽게 만드는 "무지개" 효과를 만드는 경우
• 의미론적 오용: 장식 요소에 "오류 빨강"을 사용하여 사용자 불안을 초래하는 경우

검증 기준

• 모든 기능적 텍스트 요소는 배경에 대해 4.5:1 이상의 대비율을 가집니다.
• UI 컴포넌트 (테두리, 아이콘)는 최소 3:1 대비율을 가집니다.
• 시스템에는 기본 및 중립 색상에 대한 명확한 스케일이 포함됩니다.
• 정보가 색상만으로 전달되지 않습니다.
• 시스템은 이식성을 위해 CSS 사용자 정의 속성을 사용하여 문서화됩니다.