글자색과 배경색의 대비 비율을 계산해 WCAG 2.2 AA·AAA 충족 여부를 확인하세요. 본문 텍스트·큰 텍스트·UI 컴포넌트 기준을 한 화면에서 비교하고, 기준에 미달하면 원래 색조를 유지한 수정 후보를 제안합니다. 여러 HEX 색상을 붙여넣으면 전경색과 배경색의 모든 조합을 매트릭스로 한 번에 점검할 수 있습니다.
브라우저에서 처리: 입력한 내용은 서버로 전송되지 않습니다.
큰 텍스트는 18pt(약 24px) 이상 또는 굵은 14pt(약 18.5px) 이상입니다. 획이 얇거나 특이한 글꼴은 수치상 통과해도 더 높은 대비가 필요할 수 있습니다.
현재 색상 조합이 선택한 기준을 충족합니다.
색조는 유지하고 밝기를 우선 조정합니다. 화면에서 표현할 수 없는 색은 채도를 최소한으로 낮출 수 있습니다.
이 문장은 본문 크기의 텍스트입니다. 실제 화면에서 편하게 읽히는지 확인하세요.
큰 제목 문장
미리보기는 판정 근거가 아니라 체감 확인용입니다.
명도대비는 글자나 인터페이스 요소가 주변 배경과 얼마나 밝고 어둡게 구분되는지를 나타냅니다. 색상이 서로 달라 보여도 밝기가 비슷하면 대비 비율은 낮을 수 있습니다. 반대로 색조가 비슷해도 밝기 차이가 충분하면 더 높은 대비가 나올 수 있습니다.
따라서 브랜드 컬러의 이름이나 육안 인상만으로 판단하지 말고, 실제 화면에서 함께 놓일 전경색과 배경색을 한 쌍으로 검사해야 합니다.
WCAG 2.2는 sRGB 색상의 상대 휘도를 이용합니다. 두 색 중 밝은 색의 상대 휘도를 L1, 어두운 색을 L2라고 하면 대비 비율은 (L1 + 0.05) / (L2 + 0.05)로 계산합니다. 같은 색끼리는 1:1이고 검정과 흰색은 최대 21:1입니다. 이 수치는 색이 예쁜지 평가하는 점수가 아니라, 특정 용도로 쓸 수 있는 최소한의 밝기 차이를 확인하는 기준입니다.
판정 경계에서는 반올림하면 안 됩니다. 실제 계산값이 4.499:1이라면 화면상 4.50에 가까워 보여도 4.5:1 기준을 통과하지 않습니다. 이 도구는 원시 계산값으로 판정하고, 경계에 가까운 값은 소수점 셋째 자리까지 표시합니다.
일반 텍스트와 텍스트 이미지는 AA 4.5:1, AAA 7:1입니다. 큰 텍스트는 AA 3:1, AAA 4.5:1로 완화됩니다. UI 컴포넌트와 의미 있는 그래픽은 AA 3:1이며 별도의 AAA 기준이 없습니다.
큰 텍스트는 일반적으로 18pt, CSS 기준 약 24px 이상인 텍스트를 말합니다. 굵은 글자는 14pt, 약 18.5px 이상이면 큰 텍스트 범주에 들어갈 수 있습니다. 다만 획이 매우 얇거나 형태가 특이한 글꼴은 같은 크기라도 실제로 더 흐리게 보일 수 있습니다. 기준을 간신히 통과한 색상이라면 글자 크기만 키우는 편법보다 대비 자체를 여유 있게 높이는 편이 안전합니다.
로고와 순수 장식 텍스트, 비활성 상태의 UI는 일부 대비 요구에서 예외가 될 수 있습니다. 그러나 로고가 링크나 버튼 역할을 하거나, 비활성처럼 보이는 요소가 실제로 조작 가능하다면 별도 검토가 필요합니다.
UI 컴포넌트와 의미 있는 그래픽은 요소를 식별하거나 상태를 이해하는 데 필요한 부분이 인접한 색상과 3:1 이상 대비되어야 합니다. 입력창을 알아보는 유일한 단서가 테두리라면 테두리와 바깥 배경을 검사합니다. 체크박스의 체크 표시, 드롭다운 화살표, 선택 상태 표시, 사용자 정의 포커스 링처럼 기능이나 상태를 전달하는 시각 요소도 주변 색상과 비교해야 합니다.
모든 버튼에 반드시 3:1 테두리가 필요한 것은 아닙니다. 버튼의 텍스트나 아이콘, 배치 맥락만으로 컨트롤의 존재가 분명하다면 전체 클릭 영역의 경계까지 표시할 의무는 없습니다. 대신 실제로 식별에 사용되는 텍스트·아이콘·상태 표시는 해당 기준을 충족해야 합니다.
팔레트 감사는 각 색상을 전경색과 배경색으로 놓았을 때의 모든 조합을 보여줍니다. 먼저 본문 텍스트와 표면색 조합에서 4.5:1 이상인 셀을 찾고, 버튼 테두리·아이콘·차트 선처럼 비텍스트 요소에는 3:1 이상인 조합을 확인하세요. 브랜드의 강조색이 본문 텍스트에는 부족하더라도 큰 제목이나 굵은 아이콘에는 쓸 수 있습니다.
매트릭스의 통과 셀이 많다고 좋은 팔레트인 것은 아닙니다. 실제 제품에서 함께 배치할 조합만 선택하고, 기본·호버·포커스·선택·오류 상태까지 확인해야 합니다. 같은 색이 밝은 배경에서는 통과하지만 어두운 배경에서는 실패할 수 있으므로 라이트·다크 테마가 있다면 각각 검사하세요.
본문 텍스트라면 배경을 유지하고 글자색을 먼저 더 어둡거나 밝게 조정합니다. 브랜드 컬러를 반드시 유지해야 한다면, 그 색을 텍스트나 아이콘보다 넓은 배경 또는 장식 요소로 역할을 바꾸고 실제 정보에는 별도의 고대비 색상을 쓰는 편이 낫습니다.
UI 테두리나 아이콘은 주변 배경과 3:1 이상이 되도록 조정합니다. 얇은 선은 수치상 통과해도 흐리게 보일 수 있으므로 대비에 여유를 둡니다. 큰 텍스트의 3:1 예외를 적용하려면 실제로 전달되는 크기와 굵기가 큰 텍스트 기준을 충족하는지 먼저 확인해야 합니다. 오류·성공·선택 상태는 색만 바꾸지 말고 텍스트, 아이콘, 패턴 또는 형태를 함께 제공합니다.
이 도구의 수정 후보는 원래 hue를 유지하면서 밝기를 우선 조정하고, 화면에서 표현 가능한 sRGB 색역을 벗어날 때만 채도를 필요한 만큼 낮춥니다. 제안값은 빠른 출발점이지 브랜드 가이드와 실제 화면 검수를 대신하는 최종 정답은 아닙니다.
명도대비 기준과 '색상만으로 정보를 전달하지 말 것'은 별개의 요구사항입니다. 빨간색 오류와 초록색 성공 상태가 각각 배경과 충분히 대비되더라도, 색만 바뀌고 텍스트나 아이콘이 없다면 상태를 구분하지 못하는 사용자가 생깁니다. 오류 문구, 체크 아이콘, 선의 패턴, 직접적인 상태 라벨처럼 색 이외의 단서를 함께 제공해야 합니다.
본문 속 링크를 밑줄 없이 색상만으로 구분한다면 링크색은 주변 일반 텍스트와 3:1 이상 차이가 나야 하고, 포커스나 호버 시에는 밑줄 같은 추가 시각 단서를 제공하는 방식이 권장됩니다. 가장 단순하고 안정적인 방법은 기본 상태에서도 링크에 밑줄이나 명확한 형태 차이를 두는 것입니다.
본문과 placeholder 텍스트가 실제 배경과 4.5:1 이상인지, 3:1 기준을 적용한 제목이 실제로 큰 텍스트 크기와 굵기를 충족하는지 확인합니다. 입력창 테두리, 아이콘, 포커스 표시, 선택 상태도 인접 색상과 3:1 이상이어야 합니다.
라이트·다크 테마와 기본·호버·포커스·선택·오류 상태를 모두 확인하고, 그라디언트나 이미지 위 텍스트는 가장 대비가 낮은 영역에서도 읽히는지 봅니다. 마지막으로 오류와 상태, 차트 범례, 링크를 색상만으로 구분하고 있지 않은지 점검합니다.
본문 AA를 목표로 두고 전경색을 조정하면 #707782(4.52:1)가 제안됩니다. 회색 톤은 그대로 두고 밝기만 낮춘 값입니다.
버튼 라벨이 작은 글자라면 조정 대상을 배경색으로 바꾸세요. #5170D7(4.52:1)이 제안되어 흰 글자를 그대로 쓸 수 있습니다.
#64748B는 흰 배경에서 4.76:1로 본문에 쓸 수 있지만 #E2E8F0 위에서는 3.86:1이라 큰 글자·UI 용도까지만 가능합니다.
이 도구가 무엇인지, 누구에게·어떻게·왜 필요한지 한눈에 정리했습니다.
명도대비 검사기는 전경색과 배경색의 상대 휘도 차이를 계산해 WCAG 2.2 기준 충족 여부를 보여주는 브라우저 도구입니다.
웹과 앱의 텍스트, 버튼, 입력창, 아이콘, 그래프 색상을 검수하는 디자이너와 프론트엔드 개발자를 위한 도구입니다.
두 색의 sRGB 상대 휘도로 대비 비율을 계산하고, 여러 색상을 입력하면 모든 전경색·배경색 조합을 매트릭스로 비교합니다.
낮은 대비로 인한 가독성 문제를 시안과 구현 단계에서 발견하고, 기준을 통과하는 대체 색상을 더 빠르게 찾기 위해 사용합니다.