Web·UI·CSS
밝은 테마와 어두운 테마에서 글자 대비 확인하기
사용할 도구
밝은 작업 모니터에서 읽히는 글자가 다른 화면에서는 희미할 수 있습니다. 설명을 덜 두드러지게 하다가 읽기 어렵게 만들 수 있죠. 명암비는 전경·배경 휘도 차이를 수치로 정리합니다. 인상만으로 고르기 전에 실제 두 색을 입력해 보세요.
#777777과 흰색 측정
전경 #777777·배경 #FFFFFF는 약 4.478:1로 일반 글자 AA 4.5:1 미만입니다. #767676은 약 4.542:1입니다. 한 단계로 경계를 넘지만 간신히 통과가 목표는 아닙니다. 실제 글꼴·두께·배경에서 편하게 읽을 여유를 보세요.
#777777 / #FFFFFF → 4.478:1
#767676 / #FFFFFF → 4.542:1
#000000 / #FFFFFF → 21:1표시 비율은 반올림하지만 판정은 원래 값으로 합니다. 4.499를 4.5로 올려 통과라 하면 안 됩니다. 큰 글자 AA는 3:1이지만 제목이라고 자동 해당하지 않고 크기·두께 조건을 봐야 합니다. 일반 글자 기준 색은 설명에도 쓰기 쉽습니다.
반투명 검정은 검정 명암비가 아님
rgba(0,0,0,0.5)·흰 배경은 약 3.977:1로 합성 후 회색입니다. 검정 CSS만 복사하고 부모 opacity·겹친 배경을 빼면 실제보다 높게 볼 수 있습니다. 실제 투명도 조건을 포함하세요.
배경도 투명하면 뒤의 불투명 바탕색이 필요합니다. 같은 패널도 흰 페이지·어두운 페이지에서 다릅니다. 도구는 지정 색을 합성하지만 DOM·쌓임을 조사하지 않으므로 한 쌍으로 이미지·그라데이션·복잡한 레이어 전체를 평가할 수 없습니다.
다크 테마 조합은 따로 확인
#E2E8F0 글자·#0F172A 배경은 약 14.482:1이지만 보조 글자·링크·선택 행·호버는 별도 조합입니다. 테마별 일반·호버·포커스·선택 상태를 확인하면 배경만 바꾸고 어두운 글자는 남는 문제도 찾기 쉽습니다.
어느 색을 바꿀 수 있는지 정하세요. 고정 브랜드색은 장식·배경에 쓰고 본문은 읽기 좋은 색으로 분리할 수 있습니다. 링크는 밑줄도 써서 색상만 의존하지 마세요. 수치만 높이기보다 정보 계층을 유지하며 읽기 쉽게 하는 것이 목적입니다.
색 조합 통과가 전체 화면 통과는 아님
명암비가 맞아도 너무 작은 글자·좁은 행간·확대 시 잘림은 남습니다. 실제 문장·긴 번역·200% 글자 확대·좁은 화면을 별도 확인하세요. 미리보기는 색 조합용이지 전체 페이지 자동 감사가 아닙니다.
오류 빨강·성공 초록만으로는 모두에게 상태가 전달되지 않습니다. 문구·아이콘·보이는 포커스를 함께 쓰세요. 글자 명암비 결과로 테두리·차트·포커스까지 평가했다고 하지 말고 각각 조건·실제 조작을 확인하세요.
수정 전후는 같은 조건으로 비교
흐려서 진하게 했다는 말보다 글자 역할·전경·배경·투명도·전후 비율을 함께 공유하세요. RGB·HSL을 색 변환으로 정리해도 가독성이 저절로 좋아지지는 않습니다. 표기 변경과 배색 변경을 구분하세요.
실제 화면으로 돌아가 수정된 설명을 읽고 작업을 끝까지 해보세요. 숫자로 문제를 찾고 실화면으로 읽기·조작을 확인하는 왕복이 효과적입니다. 한 조합을 고친 뒤 같은 색의 다른 상태·테마도 살펴보세요.
본문뿐 아니라 호버와 오류 상태도 측정하기
흰 배경의 본문이 읽혀도 선택 카드, 호버 링크, 빨간 오류 글자까지 확인한 것은 아닙니다. 투명도를 포함해 글자 바로 뒤에 실제로 그려지는 면과 비교하세요. 반투명 면이 있으면 페이지 배경만 비교해서는 틀릴 수 있습니다. 상태별 전경·배경·투명도를 맞춰 어느 조합을 고칠지 찾으세요.
글자를 어둡게 하는 것 외에 배경 변경, 투명도 제거, 중요한 작은 글자를 본문으로 옮기는 방법도 있습니다. 통과시키려고 큰 글자로 분류하지 말고 실제 크기와 굵기에 맞는 기준을 쓰세요. 흰색 위 #777777처럼 4.5 근처로 반올림한 표시만으로 경계를 판단하지 말고 실제 판정 결과를 보세요.
비율을 고친 뒤 실제 화면에서도 읽어 보세요. 이미지 배경은 위치마다 다르고 얇거나 작은 글자는 여전히 어려울 수 있습니다. 오류를 빨강만으로 알리는 것도 부족하므로 글이나 아이콘을 더하고 포커스 상태도 보세요. 대비는 중요한 한 항목이지 전체 화면을 자동 채점하는 도구는 아닙니다.