Web·UI·CSS

검은 글자도 흐릴까요? 투명도와 대비 확인

사용할 도구

보조 글자가 본문과 같은 검정인데 흐리면 alpha가 낮아 배경과 섞였을 수 있습니다. 반투명 카드 위 흰 글자는 카드 뒤 면도 영향을 받습니다. 전경·배경·최종 바탕을 따로 넣고 단색 결과를 사진 전체나 변하는 배경 판정으로 확대하지 마세요.

불투명 전경과 배경

foreground: #000000
background: #FFFFFF
ratio: 21:1

검은 전경·흰 배경은 비율 21로 불투명 기준입니다. 상대 휘도 대비를 나타낼 뿐 글꼴·화면 해상도·실제 글자 크기까지 평가하지는 않습니다.

전경을 #777777로 바꾸면 흰색과 약 4.478입니다. 이를 4.5로 반올림해도 일반 글자 기준 4.5:1 통과는 아닙니다. 도구는 표시 반올림 전 판정하므로 경계 실패를 올림으로 통과시키지 마세요.

alpha가 있는 전경

foreground: rgba(0, 0, 0, 0.5)
background: #FFFFFF
composited RGB: 127.5, 127.5, 127.5
ratio: approximately 3.977:1

rgba(0,0,0,0.5)는 흰색과 반씩 섞여 회색, 약 3.977:1로 일반 글자 AA 4.5에 못 미칩니다. 원래 검정만 보지 말고 finalForeground의 합성색을 확인하세요.

같은 전경을 검은 배경에 놓으면 계속 검정이라 비율 1입니다. alpha 0.5만으로 읽기 쉬움이 정해지지 않습니다. 테마마다 투명도를 포함한 전체 조합을 다시 확인하세요.

반투명 카드 조건

foreground: #FFFFFF
background: rgba(0, 0, 0, 0.5)
backdrop: #FFFFFF → approximately 3.977:1
backdrop: #000000 → 21:1

반투명 검정 카드의 흰 글자는 뒤가 흰색이면 회색 카드, 검정이면 검정 카드입니다. 실제 불투명 최종 바탕을 넣어야 합니다. 도구는 최종 면까지 투명하면 모르는 색을 추정하지 않고 거부합니다.

부모 opacity는 글자와 배경을 그룹으로 합성할 수 있어 두 색에 같은 alpha를 따로 넣는 것과 같다고 보장되지 않습니다. 어느 요소에 투명도가 적용되는지와 실제 렌더링 색을 보세요.

WCAG AA는 일반 글자 4.5:1, 조건에 맞는 큰 글자 3:1입니다. 크다는 인상이 아닌 크기·굵기 기준입니다. 도구는 글꼴을 읽지 않고 둘 다 표시하므로 큰 글자 통과를 작은 설명에 적용하지 마세요.

대비 통과가 페이지 전체 접근성 검증은 아닙니다. 초점·링크·확대·색 외 단서를 별도 확인하세요. 목적은 통과 표식이 아니라 읽고 조작 가능한 상태입니다.

사진·그라디언트의 한 색만으로 모든 글자를 평가할 수 없습니다. 글자 아래 영역과 호버·선택·테마 상태를 확인하고 불투명 글자 배경으로 조건을 고정할 수도 있습니다. 도구는 이미지나 전체 상태를 탐색하지 않으므로 검사한 조합을 기록하세요.