Contrast Checker

WCAG contrast check

WCAG contrast check 브라우저에서 로컬로 실행됩니다.

Text colour

Background colour

The quick brown fox

Small body text at 14px

Contrast ratio17.40:1

Normal text (AA)	needs 4.5:1	Pass
Normal text (AAA)	needs 7:1	Pass
Large text 18pt+ (AA)	needs 3:1	Pass
Large text 18pt+ (AAA)	needs 4.5:1	Pass
UI components and graphics (AA)	needs 3:1	Pass

Result

Text: #1a1a1a
Background: #ffffff
Contrast ratio: 17.40:1

Normal text (AA) (needs 4.5:1): Pass
Normal text (AAA) (needs 7:1): Pass
Large text 18pt+ (AA) (needs 3:1): Pass
Large text 18pt+ (AAA) (needs 4.5:1): Pass
UI components and graphics (AA) (needs 3:1): Pass

About the

대비 검사기는 WCAG 휘도 공식을 사용하여 텍스트 색상과 배경색 간의 대비 비율을 측정하고 쌍이 통과하는 접근성 수준을 알려줍니다. 이는 본문 텍스트를 실제로 읽을 수 있는지 여부를 결정하는 검사입니다. 일반 텍스트의 경우 최소 비율은 4.5:1, 큰 텍스트 및 인터페이스 경계의 경우 3:1, 향상된 규정 준수의 경우 7:1입니다. 눈으로 대비를 판단하는 것은 신뢰할 수 없습니다. 왜냐하면 눈은 파란색보다 녹색에 훨씬 더 민감하기 때문입니다. 이것이 바로 밝게 보이는 노란색과 어둡게 보이는 파란색이 거의 동일한 점수를 받을 수 있는 이유입니다.

Where people use the

컬러 배경의 본문 텍스트가 AA를 충족하는지 확인합니다.
버튼 색상으로 흑백 텍스트 중에서 선택합니다.
재설계 전에 기존 팔레트를 감사합니다.
티켓에 접근성 결정을 문서화합니다.

How to use the

1
텍스트 색상 설정
1a1a1a와 같은 16진수 값을 입력하거나 색상 선택기를 사용하십시오. f0a와 같은 세 자리 약칭이 허용됩니다.
2
배경색 설정
배경도 마찬가지입니다. 둘 중 하나를 변경하면 미리보기가 업데이트됩니다.
3
비율을 읽어보세요
숫자는 동일한 색상인 1:1부터 흰색 바탕에 검정색인 21:1까지 이어집니다. 높을수록 가독성이 높다는 의미입니다.
4
필요한 수준을 확인하세요.
일반 본문 텍스트에는 AA의 경우 4.5:1, AAA의 경우 7:1이 필요합니다. 18pt 또는 14pt 굵은 제목과 UI 테두리는 3:1이 필요합니다.
5
미리보기도 보고 번호도 보고
한 쌍의 종이에 인쇄해도 작은 크기나 낮은 품질의 화면에서는 여전히 품질이 좋지 않게 보일 수 있습니다. 읽기 어려워 보이면 읽기도 어렵습니다.

팁 및 모범 사례

텍스트의 색상을 어둡게 하고, 채우기의 경우 더 밝은 버전을 유지합니다.
텍스트가 실제로 사용될 가장 작은 크기를 확인하십시오.
텍스트뿐만 아니라 테두리와 아이콘도 3:1이 필요합니다.

자주 묻는 질문

명암비 공식은 무엇입니까?

각 색상은 감마 보정 후 표준 가중치인 빨간색의 경우 0.2126, 녹색의 경우 0.7152, 파란색의 경우 0.0722를 사용하여 상대 휘도로 변환됩니다. 비율은 밝은 휘도에 0.05를 더한 값을 더 어두운 휘도에 0.05를 더한 값으로 나눈 값입니다. 결과 범위는 1:1에서 21:1입니다.

내 브랜드 색상이 실패하는 이유는 무엇입니까?

대부분의 채도가 높은 중간 색상은 흰색에 대해 4.5:1에 도달할 수 없기 때문입니다. 일반적인 수정 방법은 텍스트용 색상을 어둡게 하면서 큰 채우기에는 더 밝은 버전을 유지하는 것입니다. 이는 대부분의 디자인 시스템이 기본 색상으로 수행하는 것과 정확히 같습니다.

접근 가능하기에 충분한 비율을 전달하고 있나요?

그것은 필요하지만 충분하지는 않습니다. 매우 크거나 작은 텍스트, 얇은 글꼴 두께, 이미지 위의 텍스트, 특정 형태의 색각 이상 등은 모두 비율 이상의 가독성에 영향을 미칩니다. 가능한 경우 실제 사용자를 대상으로 테스트하세요.

방향이 중요합니까? 어두운 곳의 빛, 밝은 곳의 어두운 것입니까?

아니요. 비율은 대칭이므로 흰색 바탕에 검정색, 검정색 바탕에 흰색 둘 다 21:1입니다. 실제로 다른 점은 눈부심과 인지된 무게인데, 이는 규정 준수보다는 설계 판단입니다.

큰 텍스트로 간주되는 것은 무엇입니까?

WCAG 용어로 18pt 이상, 굵은 글씨일 경우 14pt 이상입니다. 대략 24px인 CSS 픽셀, 굵은 글씨일 경우 약 18.66px입니다.

계산은 어디서 하나요?

브라우저에서 완전히. 업로드된 내용이 없으므로, 아직 공개되지 않은 브랜드 가이드라인에서 색상을 확인하실 수 있습니다.