Contrast ratio4.79:1AA for normal text
Large text sampleNormal body text - the quick brown fox jumps over the lazy dog.Small caption text at 14 pixels.
WCAG 2.2 results
AA NormalPass≥ 4.5:1
AAA NormalFail≥ 7:1
AA LargePass≥ 3:1
AAA LargePass≥ 4.5:1
UI Components & GraphicsPass≥ 3:1 (WCAG 1.4.11)
Category:color
Mode:Offline
Version:1.0.0
Access:Free
색상 대비 검사기란?
색상 대비 검사기는 전경색(텍스트) 색상과 배경색 간의 대비 비율을 측정하고 해당 쌍이 웹 콘텐츠 접근성 지침을 충족하는지 여부를 알려줍니다. 1:1에서 21:1 사이의 단일 숫자를 보고하고 일반 및 큰 텍스트 크기 모두에서 AA 및 AAA에 대한 WCAG 2.2 임계값과 사용자 인터페이스 구성 요소 및 그래픽에 대한 별도의 3:1 임계값에 대해 등급을 매깁니다.
대비는 두 색상의 상대적 휘도 차이가 아니라 색상 차이입니다. 저시력, 색시력 결핍증이 있는 독자 또는 밝은 햇빛 아래서 전화를 사용하는 사람에게는 여전히 실패하면서 두 가지 색상이 뚜렷하게 느껴질 수 있습니다. 비율은 WCAG에서 정의한 정확한 sRGB 상대 휘도 공식으로 계산되므로 결과는 대략적인 시각적 추측보다는 감사 도구 및 화면 판독기 사용자가 경험하는 것과 일치합니다.
모든 것이 브라우저에서 실행됩니다. 색상을 16진수, RGB, HSL 또는 CSS 키워드로 입력하거나 붙여넣고, 실시간 텍스트 미리보기 업데이트를 시청하고, 쌍이 실패하면 제안된 색상을 적용할 수 있습니다. 업로드된 것이 없고 가입이 없으며 페이지가 로드되면 도구가 오프라인에서 계속 작동합니다.
WCAG 2 콘트라스트 공식은 상대 휘도의 비율이며,그 임계값은 접근성 감사와 대부분의 법적 요구 사항이 측정되는 것이므로 디자인하기에 적합한 숫자입니다. 또한 불완전한 것으로 알려져 있습니다: 어두운 배경의 밝은 텍스트에 관대하고 일부 중간 톤 쌍에 가혹할 수 있기 때문에 후속 알고리즘 인 APCA 가 존재하고 향후 버전에 대해 시험되고 있습니다. 큰 텍스트는 더 낮은 막대를 가지며 큰 의미는 18pt 또는 굵게 표시 할 때 14pt 로 약 24px 및 18,66px 입니다. 텍스트가 아닌 요소는 3:1 에서 1.4.11 에 의해 별도로 다루어지며 가장 자주 놓치는 규칙입니다: 아이콘 버튼,입력 테두리 및 초점 링 모두 필요하며 디자인은 모든 단락을 전달하고 여전히 양식 필드에서 실패 할 수 있습니다.
색상 대비 검사기를 사용하는 방법은 무엇입니까?
1
텍스트 색상을 입력하세요.
전경색을 일반적인 형식으로 입력하거나 붙여넣습니다. - #1a1a1a,rgb(26,26,26), hsl(0,0%, 10%) 또는 네이비 같은 키워드. 색상 견본과 네이티브 피커를 사용하면 미세 조정할 수 있습니다.
2
배경색을 입력하세요
텍스트가 놓여 있는 배경을 설정합니다. 텍스트 색상이 투명도가 있는 경우 비율을 측정하기 전에 이 배경에 혼합되어 사용자가 실제로 보는 것과 일치합니다.
3
비율과 성적을 읽으십시오
정확한 명암비는 일반 및 대형 AA 및 AAA에 대한 통과 또는 실패 배지와 함께 나타납니다. 3:1 UI 구성 요소 검사는 모두 배경에 있는 텍스트의 라이브 샘플 옆에 있습니다.
4
즉시 실패 수정
조합이 실패하면 제안된 접근 가능한 색상을 적용하십시오. 도구는 대상 레벨을 지울 때까지 텍스트를 더 밝거나 어둡게 살짝 살짝 살짝 살짝 살짝 살짝 살짝 살짝 살짝 살짝 살짝 살짝 살짝 살짝 살짝 살짝 살짝 살짝 살짝 살짝 살짝 살짝 살짝 살짝 살짝 살짝 살짝 살짝 살짝 살짝 살짝 살짝 살짝 살짝 살짝 살짝 살짝 살짝 살짝 살짝 살짝 살짝 살짝 살짝 살짝 살짝 살짝 살짝 살짝 살짝 살짝 살짝 살짝 살짝 살짝 살짝 살짝 살짝 살짝 살짝 살짝 살짝 살짝 살짝 살짝 살짝 살짝 살짝 살짝 살짝 살짝 살짝 살짝 살짝 살짝 살짝 살짝 살짝 살짝 살짝 살짝 살짝 살짝 살짝 살짝 살짝 살짝 살짝 살짝 살짝 살짝 살짝 살짝 살짝 살짝 살짝 살짝 살짝 살짝 살짝 살짝 살짝 살짝 살짝 살짝 살짝 살짝 살짝 살짝 살짝 살짝 살짝 살짝 살짝 살짝 살짝 살짝 살짝 살짝 살짝 살짝 살짝 살짝 살짝 살짝 살짝 살짝 살짝 살짝 살짝 살짝 살짝 살짝 살짝 살짝 살짝 살짝 살짝 살짝 살짝
주요 특징
정확한 WCAG 비율
WCAG 2.2의 공식 sRGB 상대 휘도 및 대비 비율 공식을 사용하므로, 그 숫자는 근사치가 아닌 소수점 이하 두 자리까지 공식 감사와 일치합니다.
AA, AAA 및 UI 등급
모든 결과는 AA(4.5:1), AAA(7:1), 큰 텍스트 임계값(3:1 및 4.5:1), 텍스트가 아닌 UI 구성 요소 및 그래픽 개체에 대한 3:1 규칙에 대해 등급이 매겨집니다.
라이브 텍스트 미리보기
입력할 때 선택한 배경에 일반 및 대형 텍스트 렌더링의 실제 샘플을 사용하여 숫자 점수와 함께 가독성을 판단할 수 있습니다.
접근 가능한 색상 제안
한 쌍이 실패하면 도구가 HSL에서 목표 비율을 충족하고 한 번의 클릭으로 적용할 수 있는 합격 값을 제공할 때까지 HSL에서 텍스트 색상을 더 밝게 또는 더 어둡게 안내합니다.
Frequently Asked Questions
일반 본문의 경우 WCAG AA를 충족하려면 최소 4.5:1, 7:1을 목표로 하여 더 엄격한 AAA 수준을 충족합니다. 큰 텍스트(약 24px 또는 18.66px 굵게)는 AA의 경우 3:1, AAA의 경우 4.5:1만 필요합니다. 아이콘과 대화형 UI 구성 요소는 최소 3:1이 필요합니다.
Related Tools
CLR
color
Color Converter
Convert color codes between HEX, RGB, HSL, HWB, and CMYK instantly
CLR
color
Color Palette Generator
Generate harmonious color palettes from any base color - shades and tints, complementary, analogous, triadic, and monochromatic - with HEX, RGB, and HSL values you can copy.
CLR
color
Color Picker & Converter
Pick colors and convert between HEX, RGB, and HSL formats
CLR
color
Color Shades Generator
Generate tints, shades, and tones from any base color
Comments
0 comments
No comments yet. Be the first to share your thoughts!
color contrast checkerwcag contrast checkercontrast ratio calculatoraccessibility contrastaa aaa contrasttext contrast checkera11y color checkerwcag 2.2 contrastaccessible colors