CHROMA

명암비 검사기

글자색과 배경색을 넣으면 WCAG 2.1 기준 통과 여부와 APCA Lc를 함께 보여줍니다. 미달이면 색을 바꾸지 않고 밝기만 조정한 대안을 제안합니다.

큰 제목 24px

가나다 Abc 123

버튼·아이콘 같은 UI 요소
2.95:1
명암비

WCAG 2.1 판정

본문 AA (4.5:1)미달큰 글씨 AA (3:1)미달본문 AAA (7:1)미달큰 글씨 AAA (4.5:1)미달UI 요소 (3:1)미달

현행 웹 접근성 기준입니다. 법적 요구사항은 대부분 이쪽을 따릅니다.

01 / FIX

기준을 넘기려면

OKLCH의 밝기(L)만 움직이고 색상각은 그대로 둡니다. 같은 색인데 밝기만 다른 값이라 브랜드 색을 크게 벗어나지 않습니다.

글자색 조정

4.50:1 · 밝기 10.6 이동

배경색 조정

4.50:1 · 밝기 69.2 이동

02 / APCA

APCA Lc

WCAG 3에서 검토 중인 새 계산법입니다. 밝은 배경의 어두운 글자와 그 반대를 다르게 셈하고, 결과를 비율이 아니라 Lc 값으로 냅니다.

Lc 55.0
밝은 배경 위 어두운 글자
아주 크고 굵은 글씨만 (36px 이상)

⚠️ APCA는 아직 초안입니다. 준수 여부를 판정할 때는 위의 WCAG 2.1을 기준으로 삼으세요.

03 / HOW

계산 방법

WCAG 2.1의 명암비는 두 색의 상대휘도로 구합니다. 각 채널을 0~1로 정규화해 sRGB 감마를 되돌린 뒤 0.2126·R + 0.7152·G + 0.0722·B 로 휘도 L을 얻고, (밝은 쪽 L + 0.05) ÷ (어두운 쪽 L + 0.05) 이 명암비입니다. 결과는 1:1에서 21:1 사이입니다.

“큰 글씨”는 18pt(약 24px) 이상, 또는 굵은 글씨 14pt(약 18.66px) 이상을 뜻합니다. 로고와 비활성 상태의 요소는 이 기준에서 제외됩니다.

투명도가 있는 색은 실제로 화면에 합성된 뒤의 색으로 검사해야 합니다. 이 도구는 불투명한 두 색을 기준으로 계산합니다.

04 / NAMES

흰 배경·검은 배경에서 통과하는 CSS 색 이름

CSS 색 이름 141개를 흰색과 검정 배경에 각각 올려 계산한 결과입니다. 본문 AA(4.5:1) 통과 여부를 함께 표시했습니다.

흰 배경에서 본문 AA 통과 30개

Black Blue Blueviolet Brown Crimson Darkblue Darkgreen Darkmagenta Darkolivegreen Darkorchid Darkred Darkslateblue Darkslategray Darkviolet Dimgray Firebrick Green Indigo Maroon Mediumblue Mediumvioletred Midnightblue Navy Purple Rebeccapurple Royalblue Saddlebrown Sienna Slateblue Teal

검은 배경에서 본문 AA 통과 111개

Aliceblue Antiquewhite Aqua Aquamarine Azure Beige Bisque Blanchedalmond Burlywood Cadetblue Chartreuse Chocolate Coral Cornflowerblue Cornsilk Cyan Darkcyan Darkgoldenrod Darkgray Darkkhaki Darkorange Darksalmon Darkseagreen Darkturquoise Deeppink Deepskyblue Dodgerblue Floralwhite Forestgreen Fuchsia Gainsboro Ghostwhite Gold Goldenrod Gray Greenyellow Honeydew Hotpink Indianred Ivory Khaki Lavender Lavenderblush Lawngreen Lemonchiffon Lightblue Lightcoral Lightcyan Lightgoldenrodyellow Lightgray Lightgreen Lightpink Lightsalmon Lightseagreen Lightskyblue Lightslategray Lightsteelblue Lightyellow Lime Limegreen Linen Magenta Mediumaquamarine Mediumorchid Mediumpurple Mediumseagreen Mediumslateblue Mediumspringgreen Mediumturquoise Mintcream Mistyrose Moccasin Navajowhite Oldlace Olive Olivedrab Orange Orangered Orchid Palegoldenrod Palegreen Paleturquoise Palevioletred Papayawhip Peachpuff Peru Pink Plum Powderblue Red Rosybrown Salmon Sandybrown Seagreen Seashell Silver Skyblue Slategray Snow Springgreen Steelblue Tan Thistle Tomato Turquoise Violet Wheat White Whitesmoke Yellow Yellowgreen
05 / FAQ

자주 묻는 질문

4.5:1은 어디서 나온 숫자인가요?

WCAG 2.1의 성공 기준 1.4.3입니다. 시력 20/40(교정 후 경도 저시력) 수준에서 본문을 읽을 수 있는 최소치로 정해졌습니다. AAA인 7:1은 20/80 수준을 기준으로 합니다.

WCAG와 APCA 결과가 다른데 어느 쪽을 믿나요?

준수 판정은 WCAG 2.1입니다. APCA는 어두운 배경에서 WCAG가 과대평가하는 문제 등을 고치려는 초안이라, 디자인 판단의 참고로만 쓰는 것이 안전합니다.

색상을 유지한 채 대비만 올릴 수 있나요?

이 페이지의 제안이 그 방식입니다. OKLCH의 밝기 L만 이분 탐색으로 움직여 목표를 방금 넘긴 지점을 찾습니다. 색상각은 그대로 두고, sRGB를 벗어나면 채도를 줄여 화면에 낼 수 있는 값으로 되돌립니다.

MORE

이어서 볼 것

색각이상 시뮬레이터색 두 개를 넣으면 8가지 색각 유형에서 어떻게 보이는지, 그리고 서로 구분되는지 알려줍니다. 계산은 브라우저 안에서 끝납니다. 색상 선택드래그로 색을 잡고 HEX·RGB·HSL·HSV·CMYK·LAB 코드를 클릭 한 번에 복사합니다. 화면 어디서든 색을 집는 스포이드와 이미지 색 추출도 지원합니다. CSS 색 이름 141가지CSS와 HTML에서 이름만으로 쓸 수 있는 색입니다. 계열별로 묶어 두었으니 원하는 색을 눌러 코드와 배색을 확인하세요.