유틸/배경/텍스트 색상 가시성 확인
이 배경색에는
어떤 글자색이 어울릴까
배경색
텍스트 색상
지금 조합의 대비
1.54:1읽기 어렵습니다
✕ 큰 글씨대비 3:1 이상
24px 이상이거나 굵은 19px 이상인 글씨, 버튼·아이콘
✕ 본문 글씨대비 4.5:1 이상
일반 본문처럼 작은 글씨
✕ 여유 있게대비 7:1 이상
작은 글씨도 누구나 편하게 읽는 수준
실제 화면에선 이렇게 보여요
지금 조합을 밝은 화면, 어두운 화면, 사진 위에 올린 모습입니다.
가나다 Abc 123
가나다 Abc 123밝은 화면
가나다 Abc 123
가나다 Abc 123어두운 화면
가나다 Abc 123
가나다 Abc 123사진 위
색 추천
한쪽 색은 그대로 두고 다른 쪽의 밝기만 바꿔 각 기준에 딱 닿는 가장 가까운 색입니다. 적용을 누르면 실제 화면 미리보기에 바로 반영됩니다.
선택한 텍스트 색상에 맞는 배경색을 추천드려요선택한 색상: #FFFFFF
- 큰 글씨
대비 3:1가나다 Abc 123대비 3.00:1 - 본문 글씨
대비 4.5:1가나다 Abc 123대비 4.50:1 - 여유 있게
대비 7:1가나다 Abc 123대비 7.08:1
선택한 배경색에 맞는 텍스트 색상을 추천드려요선택한 색상: #8CE0CE
- 큰 글씨
대비 3:1가나다 Abc 123대비 3.00:1 - 본문 글씨
대비 4.5:1가나다 Abc 123대비 4.54:1 - 여유 있게
대비 7:1가나다 Abc 123대비 7.05:1
배경색 여러 개 한 번에 검사
hex 를 줄바꿈이나 쉼표로 붙여넣으면 지금 텍스트 색상(#FFFFFF)으로 판정하고, 텍스트는 그대로 둔 채 배경만 고친 추천도 같이 나옵니다.
| 배경 | 대비 | 판정 | 큰 글씨용 배경 | 본문용 배경 |
|---|---|---|---|---|
| 가나다 Abc 123 | 대비 2.12:1 | 읽기 어렵습니다 | ||
| 가나다 Abc 123 | 대비 1.63:1 | 읽기 어렵습니다 | ||
| 가나다 Abc 123 | 대비 1.54:1 | 읽기 어렵습니다 |
대비 수치는 웹 접근성 표준(WCAG 2)의 명도 대비이며 1:1(구분 불가)부터 21:1(흰 바탕 검은 글씨)까지입니다. 큰 글씨 3:1, 본문 4.5:1, 여유 7:1이 그 표준의 기준값입니다. 색 보정은 OKLCH 색공간에서 밝기만 바꾸므로 색상이 유지됩니다.