색상 대비 검사기

사용방법

색상 대비 검사기 사용 방법

01
텍스트 색상을 선택하세요
전경색을 선택하거나 입력합니다.
02
배경을 선택하세요
배경색을 선택하거나 입력합니다.
03
비율을 읽어보세요
명암비와 AA/AAA 결과를 확인하세요.
04
조정하다
통과할 때까지 색상을 조정합니다.

사용 사례

일반적인 사용 사례

—UI 텍스트가 WCAG 접근성을 충족하는지 확인
—버튼 및 링크 대비 확인
—브랜드 색상 팔레트 감사
—대비가 낮은 마케팅 문구 수정

개요

모든 사람이 읽을 수 있도록 텍스트를 만드세요.

저대비 텍스트는 가장 일반적인 접근성 오류 중 하나입니다. 이 검사기는 공식 WCAG 상대 휘도 공식을 사용하여 텍스트와 배경 색상 간의 정확한 대비 비율을 계산한 다음 AA(일반 텍스트의 경우 4.5:1, 큰 텍스트의 경우 3:1) 및 더 엄격한 AAA(7:1 및 4.5:1)를 통과하는지 알려줍니다. 실시간 미리보기에는 선택한 색상의 실제 텍스트가 표시됩니다.

원하는 대로 색상을 입력하세요.

색상 선택기를 사용하거나 16진수 코드와 rgb() 값을 직접 입력하세요. 도구는 두 가지를 모두 구문 분석합니다. 색상을 조정하면 비율과 합격/불합격 배지가 즉시 업데이트되므로 원하는 색상이 나올 때까지 조금씩 움직일 수 있습니다. 모든 것이 로컬에서 실행되므로 UI, 테마 및 마케팅 페이지를 디자인하는 동안 빠른 동반자가 됩니다.

특징

01: WCAG AA 및 AAA 통과/실패 결과
02: 실시간 명암비 계산
03: 색상 선택기를 사용한 16진수 및 RGB 입력
04: 색상에 대한 실시간 텍스트 미리보기
05: 일반 및 큰 텍스트 임계값
06: 브라우저에서 로컬로 실행됩니다.

FAQ

자주 묻는 질문

WCAG를 통과하려면 어떤 명암비가 필요합니까?+

AA의 경우 일반 텍스트는 4.5:1, 큰 텍스트는 3:1이 필요합니다. 더 엄격한 AAA의 경우 일반 텍스트에는 7:1이 필요하고 큰 텍스트에는 4.5:1이 필요합니다. 큰 텍스트는 대략 18pt 또는 14pt 굵게 표시됩니다.

명암비는 어떻게 계산되나요?+

두 색상 모두에 대해 WCAG 상대 휘도 공식을 사용한 다음 밝은 휘도(더하기 0.05)를 더 어두운 휘도(더하기 0.05)로 나누어 1:1에서 21:1 사이의 값을 제공합니다.

RGB와 Hex를 모두 입력할 수 있나요?+

예. #1e293b 또는 rgb(30, 41, 59)와 같은 16진수 코드를 입력하거나 색상 선택기를 사용하세요. 두 형식 모두 즉시 구문 분석됩니다.

무료인가요?+

예, 가입 없이 완전히 무료이며 브라우저에서 완전히 실행됩니다.