Color Contrast
색상 대비
색상 대비는 콘텐츠와 주변 배경 사이의 측정된 밝기 차이를 나타냅니다. 주요 텍스트와 가장자리를 쉽게 볼 수 있는지 보여줍니다.
다른 예시
팀은 희미한 글자가 밝은 표면과 어두운 표면에서 읽기 쉽게 될 때까지 변경합니다.
주요 부분
- 01Foundation or token
- 02Applied component
- 03Visible state and rule
사용할 때
텍스트, 주요 아이콘, 포커스 표시 및 구성 요소 가장자리에 대해 올바른 WCAG 대비 수준을 충족하세요. 색상이 의미를 가질 때 추가 단서를 제공하세요.
다음 경우에는 사용하지 마세요
색을 바꿔도 대비가 안 좋을 수 있어요. 상태를 알려주는 유일한 표시로 색을 쓰면 안 돼요.
코드에서 사용된 이름
contrast ratio 출시하기 전에
Check content order, shared design values, component consistency, contrast, zoom, and layout changes by screen size. Verify every theme, language, and state. If there is motion, offer an equal reduced-motion experience.
Outcome：Complete the task with 색상 대비 (Color Contrast)。 User context：팀은 희미한 글자가 밝은 표면과 어두운 표면에서 읽기 쉽게 될 때까지 변경합니다. Design concept to apply：색상 대비 (Color Contrast)。 Why it fits：텍스트, 주요 아이콘, 포커스 표시 및 구성 요소 가장자리에 대해 올바른 WCAG 대비 수준을 충족하세요. 색상이 의미를 가질 때 추가 단서를 제공하세요. Do not use it when：색을 바꿔도 대비가 안 좋을 수 있어요. 상태를 알려주는 유일한 표시로 색을 쓰면 안 돼요. Design requirements: Set the content order, shared design values, and reusable components. Define how the layout changes by screen size and state. Keep useful design choices separate from decoration. Inclusion and resilience: Check contrast, zoom, languages, themes, and reduced motion when needed. Do not use color or effects as the only way to show meaning. Acceptance criteria: The design stays clear on phones and desktops, at zoom, in every theme, and in all supported languages. Interactive states stay clear and consistent. Evidence and limits (evidence boundary)：이 표준은 나열된 범위만 적용합니다. 시각적 스타일, 제품 결정, 또는 Vibulary 예시는 선택하지 않습니다. Unknowns to confirm: Brand limits, amount of content, supported themes and languages, target devices, and design-system rules.
이 요청을 확인하세요
Review how 색상 대비 (Color Contrast) is used now. Definition: 색상 대비는 콘텐츠와 주변 배경 사이의 측정된 밝기 차이를 나타냅니다. 주요 텍스트와 가장자리를 쉽게 볼 수 있는지 보여줍니다. Release checks: Check content order, shared design values, component consistency, contrast, zoom, and layout changes by screen size. Verify every theme, language, and state. If there is motion, offer an equal reduced-motion experience. Before changing code, list the evidence, gaps, severity, and the smallest safe fix.