색상

액세스할 수 있는 색깔

색상만 사용하여 사용자 인터페이스 구성요소 또는 상태를 나타내지 않음: 아이콘 또는 도형을 사용하여 구분합니다. 색상만으로 성공/오류를 표시하지 마세요. 아이콘 또는 텍스트를 사용합니다.

<!-- Good: Denotes state without colors alone -->
<div class="error-msg">
  <span aria-hidden="true">❌</span>
  <span>The password entered was invalid.</span>
</div>

대비

• 최소 대비 표준: 일반 텍스트의 경우 4.5:1, 큰 텍스트 또는 아이콘의 경우 3:1을 유지합니다.
• 비텍스트 대비 표준 보장: 사용자 인터페이스 구성요소 경계 및 상태의 최소 대비율을 3:1로 유지합니다.
  • 여기에는 경계를 형성하거나 UI 구성요소의 존재를 나타내는 시각적 요소 (테두리, 배경, 상자 그림자, 밑줄)가 포함됩니다 (예: 입력 필드 테두리).
  • 여기에는 구성요소 내에서 활성 상태를 나타내는 시각적 요소 (예: 체크박스 체크표시 또는 스위치 엄지손가락)도 포함됩니다.
  • 주의: 3:1의 텍스트가 아닌 콘텐츠 명암비를 충족하면 미니멀한 디자인을 구현하기 어려울 수 있습니다. 부드러운 그라데이션이나 미묘한 인셋/아웃셋 그림자는 접근성 요구사항을 충족하면서 시각적 경계를 부드럽게 만들 수 있습니다.
• 필요한 경우에만 prefers-contrast 사용: 디자인에서 대비가 낮은 강조 요소 (예: 미묘한 테두리, 흐릿한 보조 텍스트)를 사용하여 이를 보강해야 하는 경우 @media (prefers-contrast: more)를 사용하세요. 이미 기본 대비를 충족하는 대부분의 사이트에서는 이 기능이 필요하지 않습니다.

밝은 색 구성표와 어두운 색 구성표

• 밝은 색 구성표와 어두운 색 구성표 지원: @media (prefers-color-scheme: dark)를 적용하고 color-scheme CSS 속성과 페어링하여 양식 컨트롤, 스크롤바, 기타 UA 렌더링 표시 경로가 일치하도록 합니다. 자세한 내용은 어두운 모드를 참고하세요.

강제 색상 모드

• 강제 색상 모드 지원: 강제 색상 모드 (Windows의 고대비)에서 브라우저는 작성자 색상을 시스템 키워드로 재정의하고 background-image, box-shadow, border-image를 제거합니다. @media (forced-colors: active)를 사용하여 색상 토큰의 시스템 색상 대체 값을 정의합니다.
• 색상이 필수 정보인 경우에만 forced-color-adjust: none를 사용합니다 (문법 강조 표시기, 색상 선택 도구 견본). 미적 요소만을 위해 forced-color-adjust: none를 사용하지 마세요.
• background-image, box-shadow, border-image에 의존하여 테두리, 구분선, 상태를 전달하지 마세요. 강제 색상 모드에서는 이러한 요소가 사라집니다 (인쇄 시에도 사라지는 경우가 많음). 꼭 사용해야 한다면 강제 색상 모드에서 대체 수단(예: 시스템 색상 키워드(CanvasText, LinkText, ButtonText, Highlight, GrayText 등)가 있는 outline 또는 border)이 있는지 확인하세요.

색조 생성 중

색조를 동적으로 생성하기 전에 기존의 사전 정의된 디자인 토큰을 사용할 수 있는지 확인하세요. 이를 통해 디자이너는 더 많은 제어 기능을 사용할 수 있고 일관성을 보장할 수 있습니다.

더 밝거나 어두운 색상을 동적으로 생성해야 하는 경우 다음을 따르세요.

• oklch/oklab 또는 lch/lab(예: oklab(from var(--primary) 0.9 a b))에서 밝기 채널만 조정하지 마세요. 이론적으로는 올바른 방법이지만 브라우저에서 아직 색 영역 매핑을 구현하지 않으므로 결과 색상을 예측할 수 없습니다.
• color-mix()를 사용하여 흰색 또는 검은색과 혼합할 수 있습니다(oklab에서 권장). 이렇게 하면 색상이 색 영역 내에 안전하게 유지되지만 색상의 채도가 과도하게 낮아지고 색조와 음영이 흐려지는 경향이 있습니다.
• 밝기 조정을 다른 방법(예: color-mix(in oklab, oklch(from var(--primary) 0.9 c h), white 30%))과 결합하여 두 방법 간의 균형을 맞출 수 있지만(MAY) 밝기 조정이 30% 를 초과하지 않도록 해야 합니다.