Accessible Colors - 안전색깔론 서비스

근거 #1: WCAG 2.2 – 1.4.3 Contrast (Minimum)

The visual presentation of text and images of text has a contrast ratio of at least 4.5:1, except for the following:

• Large Text: Large-scale text and images of large-scale text have a contrast ratio of at least 3:1;
• Incidental: Text or images of text that are part of an inactive user interface component, that are pure decoration, that are not visible to anyone, or that are part of a picture that contains significant other visual content, have no contrast requirement.
• Logotypes: Text that is part of a logo or brand name has no contrast requirement.

텍스트 및 텍스트 이미지의 시각적 표현은 다음 예외를 제외하고 최소 4.5:1의 명도 대비 비율을 가져야 합니다.

• 큰 텍스트: 대형 텍스트 및 대형 텍스트 이미지의 경우 최소 3:1의 대비 비율만 요구됩니다.
• 부수적 요소: 사용하지 않는 UI 컴포넌트의 텍스트, 장식용 텍스트, 시각적으로 보이지 않는 텍스트, 또는 복잡한 이미지 일부로 포함된 텍스트는 대비 요건이 없습니다.
• 로고 및 상표: 로고 또는 브랜드 이름의 일부인 텍스트는 대비 요건이 없습니다.

적용대상

일반 텍스트

버튼

폼 필드 안의 텍스트

본문

링크 텍스트 등 UI 전반의 읽기 가능한 요소

근거 #2: WCAG 2.2 – 1.4.6 Contrast (Enhanced)

The visual presentation of text and images of text has a contrast ratio of at least 7:1, except for the following:

• Large Text: Large-scale text and images of large-scale text have a contrast ratio of at least 4.5:1;
• Incidental and Logotypes: Same exceptions as for 1.4.3.

텍스트 및 텍스트 이미지의 시각적 표현은 다음 예외를 제외하고 최소 7:1의 명도 대비 비율을 가져야 합니다.

• 큰 텍스트: 대형 텍스트 및 대형 텍스트 이미지의 경우 최소 4.5:1의 대비 비율이 요구됩니다.
• 부수적 요소와 로고: 1.4.3과 동일한 예외 사항이 적용됩니다.

적용 대상

AAA 등급을 목표로 하는 환경에서의 텍스트

고대비 접근성을 강화해야 하는 콘텐츠

고령자 또는 저시력 사용자가 자주 이용하는 서비스

근거 #1: WCAG 2.2 – 1.4.11: Non-text Contrast

Visual presentation of the following have a contrast ratio of at least 3:1 against adjacent color(s):

• User Interface Components: Visual information required to identify user interface components and states.
• Graphical Objects: Parts of graphics required to understand the content, except when a particular presentation is essential to the information being conveyed.

다음 항목은 인접한 색상과 최소 3:1 이상의 명도 대비 비율을 가져야 합니다.

• 사용자 인터페이스 컴포넌트: 버튼, 토글 등 인터페이스 요소의 구분을 위한 시각 정보
• 그래픽 객체: 콘텐츠 이해에 필요한 그래픽 구성 요소 (단, 특별한 시각적 표현이 필수인 경우 제외)

근거 외 추가 기능

아웃라인, 버튼 테두리, 배경, 텍스트 간의 대비를 실시간으로 계산

시각 정보로서의 색상 역할을 분석하고 결과 출력 (매우 잘 구분됨, 거의 구분되지 않음 등)

근거 #2: WCAG 2.2 – 2.4.11: Focus Appearance (Minimum)

When a user interface component receives keyboard focus, the component has a visible focus indicator that:

• has an area of at least the size of a 1 CSS pixel border of the component
• has a contrast ratio of at least 3:1 between the same pixels in the focused and unfocused states

UI 컴포넌트(예: 버튼)가 키보드 포커스를 받을 때, 다음 조건을 만족하는 명확한 포커스 표시가 있어야 합니다.

• 포커스 표시 면적은 최소 1 CSS 픽셀 테두리 크기 이상
• 포커스 상태와 비포커스 상태의 해당 픽셀 간 명도 대비가 3:1 이상이어야 함

근거 외 추가 기능

아웃라인 색상 (outline)과 버튼 배경/테두리 간 대비를 명도 대비 기준으로 측정

시각적으로 outline-color를 포커스 상태에서 5px 두께로 표시

포커스 스타일이 기존 버튼 스타일과 충분히 구분되는지 측정 가능

근거 #3: WCAG 2.2 – 2.5.8: Target Size (Minimum)

The size of the target for pointer inputs is at least 44 by 44 CSS pixels except when: (some exceptions apply)

포인터(마우스, 터치 등) 입력을 위한 대상 요소의 크기는 최소 44x44 CSS 픽셀 이상이어야 합니다. (예외: 인접 요소와 충분히 떨어졌거나 다른 방식으로 접근 가능한 경우)