색상 대비가 부족하다는 경고가 뜰 때, 숫자를 읽고 색을 고치는 법
대비 경고를 받았을 때 색을 아무렇게나 바꾸면 브랜드 색이 무너집니다. 숫자가 뜻하는 바와 색상은 유지한 채 명도만 조정하는 방법입니다.
최종 수정일 읽는 데 약 4분
핵심 요약
- 대비율은 두 색의 밝기 비를 1대1에서 21대1 사이의 값으로 나타낸 것입니다.
- 일반 크기 본문은 4.5대1, 큰 글자와 굵은 글자는 3대1이 널리 쓰이는 기준입니다.
- 색상과 채도는 그대로 두고 명도만 조정하면 브랜드 색을 크게 해치지 않고 대비를 올릴 수 있습니다.
- 이 사이트의 색상 변환기는 대비율을 계산하지 않으므로 판정은 별도 검사 도구가 필요합니다.
디자인 도구나 검사 도구에서 "대비가 부족합니다"라는 경고를 받았습니다. 색을 조금 어둡게 바꿔 봤더니 경고는 사라졌는데 원래 의도했던 색과 달라져 버렸습니다.
감으로 조정하면 대체로 이렇게 됩니다. 결론부터 말하면 대비는 밝기 차이의 문제이고, 색상과 채도는 그대로 둔 채 명도만 조정하면 색의 성격을 유지하면서 경고를 해소할 수 있습니다.
대비율이라는 숫자가 뜻하는 것
대비율은 두 색의 밝기가 몇 배 차이 나는지를 나타낸 값입니다.
가장 큰 값은 검정과 흰색의 조합인 21대1이고, 같은 색끼리는 1대1입니다. 모든 조합이 이 사이에 들어갑니다.
여기서 중요한 점은 색상이 아니라 밝기만 따진다는 것입니다. 빨강과 초록처럼 색은 완전히 다르지만 밝기가 비슷한 조합은 대비율이 낮게 나옵니다. 색이 달라 보인다고 읽히는 것은 아닙니다.
널리 쓰이는 기준은 두 가지입니다.
| 대상 | 기준 | 비고 |
|---|---|---|
| 일반 크기 본문 | 4.5대1 이상 | 가장 자주 걸리는 기준 |
| 큰 글자·굵은 글자 | 3대1 이상 | 크기가 크면 완화 |
| 버튼 테두리 같은 요소 | 3대1 이상 | 글자가 아닌 구성 요소 |
| 장식용 이미지 | 기준 없음 | 정보를 담지 않는 경우 |
| 비활성 상태 요소 | 기준 없음 | 조작 불가 상태 |
참고로 이 사이트의 색상 코드 변환기는 대비율을 계산하지 않습니다. 값 변환만 제공합니다. 판정 자체는 브라우저 개발자 도구나 디자인 도구의 접근성 기능, 별도의 대비 검사 도구를 써야 합니다.
색상은 유지하고 명도만 조정하는 방법
경고를 받은 색이 브랜드 색이라면 통째로 바꿀 수 없습니다. 이때 쓰는 방법이 HSL로 바꿔 명도만 조정하는 것입니다.
HSL은 색을 색상, 채도, 명도 세 가지로 나눠 적습니다. 이 중 명도만 움직이면 색의 성격은 유지되면서 밝기만 달라집니다. 파란색이 더 어두운 파란색이 되는 식입니다.
절차는 이렇습니다.
- 문제가 된 색의 HEX 값을 확인합니다.
- 색상 코드 변환기에 넣어 HSL 값을 봅니다.
- 어느 방향으로 갈지 정합니다. 밝은 배경 위의 글자라면 명도를 낮추고, 어두운 배경 위라면 올립니다.
- 명도를 5씩 조정하며 다시 검사합니다. 한 번에 크게 바꾸면 필요 이상으로 색이 달라집니다.
- 기준을 넘긴 지점에서 멈춥니다. 여유를 조금 두는 편이 안전합니다.
- 결과 HEX를 코드에 반영합니다.
4번이 중요합니다. 감으로 어둡게 만들면 채도까지 흔들려 탁한 색이 되는데, 명도만 단계적으로 움직이면 그런 일이 없습니다.
명도로 해결되지 않을 때
| 상황 | 원인 | 다른 방법 |
|---|---|---|
| 명도를 많이 낮춰야 통과 | 원래 색이 배경과 너무 가까움 | 배경색 쪽을 조정 |
| 색이 탁해짐 | 명도와 함께 채도가 부족해 보임 | 채도를 약간 올려 보정 |
| 브랜드 색을 못 바꿈 | 규정상 고정 | 브랜드 색을 배경으로 옮기고 글자는 흑백 |
| 제목만 걸림 | 큰 글자 기준 적용 가능 | 크기와 굵기를 확인 |
| 옅은 회색 안내문이 걸림 | 보조 텍스트를 너무 흐리게 함 | 명도를 올려 기준 충족 |
| 이미지 위 글자가 걸림 | 배경 밝기가 위치마다 다름 | 반투명 배경 상자를 깔기 |
마지막 줄처럼 배경이 사진이면 색만으로는 해결되지 않습니다. 글자 뒤의 밝기를 고정하는 처리가 함께 필요합니다.
대비 숫자를 잘못 읽는 경우
색이 다르면 구분된다고 생각합니다. 대비율은 밝기만 봅니다. 빨강과 초록처럼 색상이 정반대여도 밝기가 비슷하면 낮게 나옵니다.
경고만 없애면 된다고 봅니다. 기준을 아슬아슬하게 넘긴 값은 실제 화면 밝기나 조명 조건에서 다시 읽기 어려워집니다. 조금 여유를 두는 편이 낫습니다.
감으로 어둡게 만듭니다. 색상과 채도가 함께 흔들려 탁해집니다. 명도만 움직이면 이 문제가 없습니다.
보조 텍스트를 예외로 둡니다. 흐린 회색 안내문이 대비 경고에 가장 자주 걸리는 요소입니다. 덜 중요하다고 해서 읽히지 않아도 되는 것은 아닙니다.
한 조합만 고칩니다. 같은 색을 여러 배경에서 쓰고 있다면 조합마다 결과가 다릅니다. 쓰이는 곳을 모두 확인해야 합니다.
숫자 하나로 판정되지 않습니다
대비율은 유용한 기준이지만 통과했다고 읽기 쉬운 것은 아닙니다. 글자 크기, 굵기, 배경의 복잡도가 함께 작용합니다.
숫자를 기준선으로 삼되 마지막에는 실제 화면에서 눈으로 확인하세요. 그리고 고칠 때는 색을 새로 고르지 말고 HSL의 명도만 움직이세요. 원래 의도한 색을 지키면서 문제만 해결하는 가장 단순한 방법입니다.
자주 묻는 질문
대비율 4.5대1은 무슨 뜻인가요?
두 색의 밝기가 4.5배 차이 난다는 뜻입니다. 검정과 흰색이 가장 큰 21대1이고, 같은 색끼리는 1대1입니다. 일반 크기 본문에서 널리 쓰이는 기준이 4.5대1이고, 큰 글자나 굵은 글자는 3대1까지 완화됩니다.
이 사이트에서 대비율을 확인할 수 있나요?
색상 코드 변환기는 HEX, RGB, HSL, CMYK 사이의 값 변환만 제공하고 대비율은 계산하지 않습니다. 대비율 판정은 별도의 검사 도구나 브라우저 개발자 도구, 디자인 도구의 접근성 기능을 사용해야 합니다. 변환기는 그 결과를 바탕으로 색을 조정할 때 쓰는 도구입니다.
글자를 크게 하면 경고가 사라지나요?
기준이 완화되므로 사라질 수 있습니다. 다만 본문 크기를 키우는 것은 레이아웃 전체에 영향을 줍니다. 제목처럼 이미 큰 글자라면 유효한 방법이지만, 본문이라면 색을 고치는 편이 부작용이 적습니다.
브랜드 색이 정해져 있어서 못 바꿉니다.
글자색 대신 배경색을 조정하는 방법이 있습니다. 브랜드 색을 글자에 쓰고 배경을 더 밝게 하거나, 반대로 브랜드 색을 배경에 쓰고 글자를 흰색이나 검정으로 바꾸는 식입니다. 브랜드 색 자체를 유지하면서 조합만 바꾸는 접근입니다.