읽기 쉬운 글자색 생성기
배경색에 어울리는 읽기 쉬운 글자색을 찾고 WCAG 명암비와 실시간 미리보기를 확인하세요.
함께 사용하면 좋은 도구: 웹사이트 배색 미리보기 , 랜덤 그라데이션 생성기 , 랜덤 5색 팔레트 생성기 외 더 많은 도구
배경색 설정
3자리 또는 6자리 16진수 색상 코드를 입력하세요. #은 생략할 수 있습니다(예: #FFF, #1E3A8A). sRGB 단색만 지원합니다.
큰 텍스트는 보통 굵기에서 24 CSS px 이상, 또는 굵은 글씨에서 18⅔ CSS px 이상을 뜻합니다. 큰 텍스트 미리보기는 24 px로 표시합니다.
추천 글자색
글자색을 생성하면 배경에 맞는 읽기 쉬운 색상을 확인할 수 있습니다.
검정, 흰색, 회색 및 유채색으로 구성된 고정 팔레트에서 기준을 충족하는 색상만 표시합니다. 가능한 모든 RGB 색상을 포함하지는 않습니다. 기준을 높이면 결과가 줄어들 수 있습니다. 배경이나 기준을 바꾸면 이전 결과가 지워집니다.
표시되는 명암비는 소수점 둘째 자리까지 반올림합니다. WCAG 2 sRGB 공식으로 계산하며 반올림하지 않고 기준과 비교합니다. 결과는 이 단색 조합의 텍스트 명암비만 평가합니다. 글꼴, 투명도, 이미지, 그라데이션 및 페이지의 다른 부분은 별도로 확인해야 합니다.
읽기 쉬운 글자색을 찾는 방법
- 단색 배경의 HEX 코드를 입력하거나 색상 선택기로 배경을 선택하세요.
- 일반 텍스트 AA(4.5:1), 일반 텍스트 AAA(7:1), 큰 텍스트 AA(3:1) 중 하나를 선택하고 글자색을 생성하세요.
- 미리 볼 텍스트를 입력하고 추천 색상과 명암비를 비교한 뒤, HEX 값 또는 글자색과 배경색의 CSS 선언을 복사하세요.
웹 디자인 활용 예시
- #FFFFFF 배경에 맞춰 기업 웹사이트나 결제 양식에 사용할 어두운 글자색을 찾으세요.
- #1E3A8A 배경에 맞춰 탐색 메뉴나 대시보드 제목 영역에 사용할 밝은 글자색을 찾으세요.
- #777777 배경과 7:1 기준을 선택해 중간 밝기의 배경에서 일반 텍스트 AAA 명암비를 충족하지 못하는 경우를 확인하세요.
자주 묻는 질문
명암비 검사기와 무엇이 다른가요?
이 생성기는 배경색 하나를 입력하면 선택한 기준을 충족하는 글자색을 추천합니다. 명암비 검사기는 이미 선택한 글자색과 배경색 조합을 평가합니다.
AAA 결과가 비어 있는 이유는 무엇인가요?
일부 중간 밝기의 배경은 어떤 글자색으로도 7:1에 도달할 수 없습니다. 가장 어두운 검정과 가장 밝은 흰색 모두 기준에 미달하면 불투명한 sRGB 글자색으로는 해당 기준을 충족할 수 없습니다. 배경색을 바꿔 보세요.
일반 본문에 3:1을 사용해도 되나요?
아니요. 일반 텍스트의 AA 기준은 4.5:1입니다. 3:1은 보통 굵기에서 18 pt(24 CSS px) 이상, 또는 굵은 글씨에서 14 pt(18⅔ CSS px) 이상인 큰 텍스트에 적용됩니다.
추천 색상을 사용하면 웹사이트 전체가 접근성 기준을 충족하나요?
아니요. 이 계산은 불투명한 sRGB 단색 조합의 텍스트 명암비만 다룹니다. 실제 글꼴, 초점 상태, 콘텐츠, 키보드 조작, 이미지 및 다른 접근성 요구 사항은 별도로 확인해야 합니다.
색상이나 미리보기 텍스트가 업로드되나요?
계산과 미리보기는 브라우저 탭 안에서 실행됩니다. 이 도구는 색상이나 미리보기 텍스트를 저장하거나 분석 이벤트에 포함하지 않습니다. 복사하면 요청한 HEX 또는 CSS만 클립보드에 기록됩니다.
배경색, 미리보기 텍스트 및 결과는 이 브라우저 탭 안에서 처리됩니다. 도구는 이를 저장하거나 분석 이벤트에 포함하지 않습니다. 보관하려면 HEX 값이나 CSS를 복사하세요.
유용한 도구를 함께 사용하는 사람에게 공유하세요.
도구가 도움이 되었나요? 또는 으로 의견을 남겨 주세요.