대비 인터페이스 및 가독성

1) 왜 대비

• 인지 부하와 피로를 줄입니다
• 인터페이스 스캔 속도를 향상시킵니다
• 시각 및 색상 장애가있는 사람들의 접근성을 향상시킵니다
• 상호 관련된 시나리오 (지불, 양식, 확인) 의 오류를 줄입니다.

2) 기본 개념 및 공식

2. 1 WCAG 대비

대비는 전경과 배경 밝기의 비율입니다

Contrast = (L1 + 0. 05 )/( L2 + 0. 05), 여기서 'L1 소 L2', 'L' 은 상대 밝기 (0.. 1).

2. 2 상대 밝기 (sRGB)

1. 구성 요소 R, G, B를 0 범위로 가져 오십시오. 1.

• 만약 'c 방향 0이라면. 04045 ', 그런 다음' c _ lin = c/12. 92`
• 그렇지 않으면 'c _ lin = ((c + 0. 055) / 1. 055) ^ 2. 4`

3. 밝기: 'L = 0. 2126 R _ lin + 0. 7152 G _ lin + 0. 0722 B _ lin '

2. 3 색 표현

HSL/HSV-수동 조정에 편리하지만 지각 적으로 균일하지는 않습니다.
실험실/LCH/OKLCH-인간의 인식에 더 가깝습니다. OKLCH는 가독성을 유지하면서 가벼움/포화도의 체계적인 변화에 편리합니다.

3) 규범 및 목표 (WCAG 2. 2)

대담한 텍스트 14 pt 또는 18 pt (정상): 적어도 3:1 (AA) 대비.
텍스트의 나머지 부분: 최소한 4를 대조하십시오. 5:1 (AA).
AAA (가독성 증가): 일반 텍스트의 경우 7:1; 4. 큰 것을위한 5-1.
도해 법 및 중요한 비 사진 요소 (입력 필드, 체크 박스, 스위치, 오류 표시기의 경계): 배경이있는 3:1 랜드 마크.
상태 (호버/포커스/프레스/비활성화) 는 상태 또는 배경을 구별 할 수있는 3:1 이상이어야하며 명시적인 비 사진 표시기 (링크 밑줄, 그림자/프레임, 두께 변화) 가 있어야합니다.

4) 설계 시스템: 대비 토큰

토큰의 속성으로 디자인 시스템 레코드 대비를 권장합니다.

• 'fg/기본' fg 'bg/base' 및 7:1 (중요한 텍스트의 경우 AAA)
• 'fg/2 차' bg/base ' 5:1
• 'fg/muted' mg 'bg/미묘한' 느낌 3:1 (서비스 텍스트)
• '테두리/기본값' bg/base '
• '대화식/기본값' bg/base ' 5:1 (링크/버튼)
• '대화식/비활성화' 는 활성 상태를 모방해서는 안됩니다. 대비 감소 및 커서/ARIA 속성을 사용합니다.

• 테마의 기본 가벼움 (L), 편차 '
• 테스트에서 최소 대비 쌍을 수정합니다

5) 밝고 어두운 테마

가벼운 테마: 텍스트는 거의 검은 색이며 (순수한 # 000이 아니라 따뜻한/차가운 그늘) 배경은 흰색에서 약간 착색되어 "스파클" 을 줄입니다.
어두운 테마: 깨끗한 # 000 배경을 피하십시오-L λ0의 깊은 흑연/숯입니다. 12–0. 16은 눈부심을 줄입니다. 흰색 텍스트를 L λ0으로 부드럽게하십시오. 9.
두 테마 모두에서 동일한 대조 대상을 유지하십시오. 색상 악센트가 어두운 배경에서 가독성을 잃지 않도록합니다 (종종 시프트 '자동 L' 및 채도 감소가 필요함).

6) 이미지 및 비디오의 텍스트

오버레이 (그라디언트/반투명 레이어 40-60%) 를 사용하거나 텍스트 아래에서 죽습니다.
최소한 4를 수정하십시오. 5: 1은 텍스트와 다이의 로컬 배경 사이에 있습니다.
동적 비디오-프레임의 밝기를 분석하여 적응 형 배경/오버레이 (중앙/배경 영역 샘플링).

7) 상태 및 상호 작용

참조는 색상뿐만 아니라 호버/초점 + 대비의 기본 밑줄 또는 밑줄로 구분해야합니다. 일반 텍스트로 3: 1

버튼: 텍스트 및 아이콘 5:1 채우다; 3: 1은 환경을 채 웁니다.
오류/성공/경고: 색상에 의존하지 마십시오. 아이콘/텍스트 프롬프트 추가; 최소 4 개의 텍스트 대비를 제공합니다 5:1.

8) 색 장애가있는 사람

모드에서 구별 가능성을 유지하십시오

중수소/프로 타노 피아 (적색-녹색 구역): 추가 징후없이 "적색 대 녹색" 조합을 피하십시오.
Tritanopia: 개별적으로 확인할 파란색-노란색 쌍.
텍스트 레이블, 다양한 유형의 스트로크/마커, 필 패턴, 세그먼트 캡션 등 모양과 그래프를 명확하게 만듭니다.

9) 타이포그래피 및 배경

불충분 한 대비로 미묘한 스타일을 피하십시

신체 크기: 컨텐츠 영역의 경우 최소 14-16 px (웹), 16-18 px.
선 간격 1. 4–1. 6은 높은 대비 배경에 대한 가독성을 향상시킵니다.
색상 배경의 텍스트: 배경 채도를 줄이거 나 목표 비율에 도달하기 위해 가벼움을 증가시킵니다.

10) 차트, 테이블, 그래프

그리드/배경으로 줄/열이 3:1 이상입니다.
축 레이블 및 범례는 4 이상입니다. 5:1.

색상을 넘어 구별 가능한 모양/패턴을 사용하십시오

11) 동적/적응 형 대비

자동 대비: 텍스트의 대비 색상을 선택한 필로 계산합니다 (예: OKLCH를 통해: 'L' 과 일치하여 4에 도달하십시오. 5:1).
시스템 설정: '선호 대비', '강제 색상', 고 대비 OS 모드를 존중하십시오.
개인화: 응용 프로그램에서 "높은 대비" 를 설정하십시오 (양식/아이콘을 통해 브랜드 아이덴티티를 유지하면서 브랜드 악센트를보다 중립적 인 악센트로 대체 함).

12) 제어 프로세스 및 자동화

12. 디자이너를위한 1

레이아웃 (테마와 키 배경 모두) 의 대비를 확인하십시오.
구성 요소 (제목/기본/보조/힌트) 에 "대비 슬롯" 을 입력하십시오.
각 구성 요소에 대한 문서 유효한 배경 컨텍스트.

12. 2 개발자

단위 도우미: 대비를 계산하고 토큰 쌍 테스트에서 주장하는 기능.
대비 메트릭 검사 (화면 렌더 + 샘플 L1/L2 계산) 가있는 비주얼 스냅 샷.
스타일 라인터: 토큰을 통해서만 "원시" 색상 금지.

12. 3 V CI/CD

테마와 상태에서 모든 'fg/bg' 쌍을 확인하십시오.
구성 요소, 변형, 테마 및 실제 값 (예: 3. 필요한 4 인 9:1. 5:1).

13) iGaming 세부 사항 (선택 사항)

밝은 프로모션 배너와 토너먼트 카드는 종종 텍스트를 먹습니다. 플레이트/오버레이 및 배경 채도 제한이 필요합니다.
중요한 알림의 시스템 요소 (18 +, 한계, 위험) -대조적으로 AAA.
리더 보드/계수: 숫자 및 부호 "+/-" 5:1, 색상 (아이콘/태그) 뿐만 아니라 승리를 강조합니다.

14) 안티 패턴

조건을 구별하기 위해 색상에만 의존합니다.
대비를 계산하지 않고 색상 배경에 얇은 회색 글꼴.
다크 모드의 "Dark on dark", 프로모션 영역의 "bright on bright".
주사위없이 세부 사항/잡음이있는 배경의 텍스트.

15) 검토 점검표

기본 텍스트

• ≥ 4. 5:1 (정상), 3:1 (큰/지방).

링크/버튼

• 단추 텍스트 5:1 채우십시오.
• 구별 가능한 3:1 상태 또는 명시 적 표시기.

아이콘/테두리

• 배경으로 3:1 이상.

어두운/빛 테마

• 동일한 대비 목표가 달성됩니다.

미디어 배경

• 오버레이/플레이트, 계수가 유지됩니다.

가용성

• 색상 외에 사진이 아닌 기능이 있습니다.

자동화

• 토큰 및 구성 요소에 대한 CI/CD의 대조 테스트.

16) 토큰 주입 (표기법 예)

color.bg.base   = oklch(0.95 0.02 260)
color.fg.primary  = oklch(0.18 0.04 260)  # ≈7:1 color.fg.secondary = oklch(0.30 0.03 260)  # ≥4.5:1 color.border    = oklch(0.40 0.03 260)  # ≥3:1 color.accent    = oklch(0.65 0.12 230)  # проверить на обоих фонах

참고: 대략적인 값; 최종 주제는 특정 주제의 대비를 계산하여 선택됩니다.

17) 팀 문서

지침에서 대비 목표, 실제/거짓 쌍의 예, 주요 구성 요소의 'fg × bg' 행렬, 미디어 배경 규칙 및 높은 대조 모드 활성화 방법을 지정하십시오.
예외 및 원인 페이지를 유지하십시오 (예: 허용 된 3). 큰 디스플레이 헤더의 좁은 경우 8:1).

간단한 요약

대비는 맛 매개 변수가 아닌 측정 된 매개 변수입니다. 목표 (AA/AAA) 를 설정하고 토큰을 통해 관리하고 (바람직하게는 OKLCH에서) CI에서 자동으로 확인하고 레이아웃에서 시각적으로 확인하고 어두운/가벼운 테마와 색상 시력 장애가있는 사람들을 고려하십시오. 이것은 가독성을 보장하고 오류를 줄이며 변환을 증가시킵