색상 대비 접근성 실수 7가지, 버튼·placeholder·다크모드 대비율 고치는 법

접근성 검수 결과를 받아 보면 의외로 "색상 대비" 지적이 가장 많아요. 결론부터 말하면 본문 글자는 배경과 4.5:1, 큰 글자와 버튼 테두리·아이콘 같은 UI 요소는 3:1을 넘어야 하는데, 실무에서 걸리는 곳은 대부분 정해져 있어요. 밝은 브랜드 컬러 버튼 위 흰 글자, 연회색 placeholder, 회색 카드 위 보조 텍스트, 아주 연한 입력창 테두리, 그리고 라이트 모드 색을 그대로 가져간 다크 모드예요.

저도 처음엔 "흰 배경에서 통과했으니 됐다"고 생각했는데, 같은 회색 글씨를 연한 회색 카드에 올리자 바로 미달이 되더라고요. 대비율은 색 하나가 아니라 글자색과 그 바로 뒤 배경색의 쌍으로 정해지기 때문이에요.

이 글은 대비율 계산 공식보다는 실무에서 자주 틀리는 경우를 모아, 실제 대비율과 고친 색을 함께 정리했어요. 공식과 계산 코드가 궁금하면 먼저 WCAG 명도 대비 4.5:1 기준과 계산 공식을 보고 오면 좋아요. 이 글의 대비율은 모두 WCAG 공식으로 직접 계산해 소수 셋째 자리에서 버린 값이에요.

핵심 요약

WCAG 2.2 AA 기준은 본문 글자 4.5:1, 큰 글자(24px 이상 또는 굵게 18.66px 이상) 3:1, 버튼 테두리·아이콘·포커스 표시 같은 UI 요소 3:1이에요.

흰 글자를 올린 밝은 버튼(#3B82F6 3.67:1, #03C75A 2.25:1)과 연회색 placeholder(#9CA3AF 2.53:1)가 가장 흔한 실패예요.

흰 배경에서 통과한 #767676도 #F3F4F6 회색 카드 위에서는 4.12:1로 떨어져요. 실제로 겹치는 배경마다 따로 검사해야 해요.

다크 모드는 별도로 검사하세요. 흰 배경에서 5.16:1인 #2563EB 링크가 #121212 배경에서는 3.62:1로 미달이에요.

색상 대비 기준 다시 보기: 무엇이 4.5:1이고 무엇이 3:1인가

먼저 기준을 정확히 짚고 갈게요. 많이 헷갈리는 부분이 "UI 요소도 4.5:1이어야 하나?"인데, 그렇지 않아요.

우리나라 한국형 웹 콘텐츠 접근성 지침(KWCAG 2.2)의 '텍스트 콘텐츠의 명도 대비' 항목도 같은 공식과 4.5:1(큰 글자 3:1) 기준을 써요. 공공기관과 일정 규모 이상의 서비스는 장애인차별금지법에 따라 웹 접근성을 지켜야 해서, 인증 심사나 민원에서 이 숫자를 그대로 확인해요.

실수 1. 밝은 브랜드 컬러 버튼 위 흰 글자

가장 흔한 경우예요. 디자인 시스템에서 인기 있는 밝은 파랑·초록·주황 위에 흰 글자를 올리면 대부분 4.5:1에 못 미쳐요. 버튼 글자는 보통 14~16px이라 큰 글자 예외(3:1)도 받기 어려워요.

고치는 방법은 세 가지예요. ① 버튼 색을 한두 단계 어둡게(Tailwind 계열이라면 500 → 600·700), ② 글자를 흰색 대신 아주 어두운 색으로, ③ 버튼 글자를 굵게 18.66px 이상으로 키워 3:1 기준을 적용받기. 브랜드 색을 꼭 지켜야 한다면 ②가 의외로 깔끔해요. 노란 배경(#FEE500)은 흰 글자가 1.27:1이지만 검정 글자는 16.42:1이에요.

실수 2. 연회색 placeholder와 안내 문구

placeholder를 "흐려야 placeholder 같다"며 아주 연하게 두는 경우가 많아요. 하지만 placeholder도 글자라서 4.5:1 대상이에요. 특히 입력 형식(예: 010-0000-0000)을 placeholder로만 알려 주면 꼭 읽혀야 하는 정보가 돼요.

흰 배경이라면 placeholder는 #767676이나 #6B7280(4.83:1) 정도가 하한이에요. 연하게 보이고 싶다면 색을 더 흐리게 하는 대신 글꼴 굵기를 줄이거나 이탤릭 없이 크기를 살짝 줄이는 식으로 구분하는 게 안전해요. 그리고 형식 안내는 placeholder가 아니라 입력창 밖의 도움말 문구로 따로 두는 게 좋아요. 입력을 시작하면 placeholder는 사라지니까요.

실수 3. 회색 카드·배지 위의 보조 텍스트

흰 배경에서 검사를 통과한 색을 연한 회색 카드나 색 배지 위에 그대로 올리면 대비가 떨어져요. 이 경우가 검수에서 가장 많이 놓치는 부분이에요.

연한 빨강 오류 배너(#FEF2F2) 위 빨간 글자 #DC2626은 4.41:1로 미달이고 #B91C1C로 바꾸면 5.91:1로 통과해요. 연한 파랑 배지(#DBEAFE) 위 #2563EB 글자도 4.23:1로 미달이에요. 색 이름이 같아도 겹치는 배경마다 검사해야 해요. 디자인 토큰을 만들 때 '이 글자색은 어느 배경들 위에 올라간다'는 쌍을 표로 정해 두면 이런 실수를 줄일 수 있어요.

실수 4. 입력창 테두리와 아이콘 (비텍스트 대비 3:1)

WCAG 2.1부터 들어온 1.4.11 비텍스트 대비는 사용자가 알아봐야 하는 UI 요소의 경계와 그래픽에 3:1을 요구해요. 입력창이 어디 있는지 테두리로만 알 수 있다면, 그 테두리가 3:1을 넘어야 해요.

다만 입력창에 배경색이 채워져 있어서 테두리 없이도 영역이 3:1 이상으로 구분되거나, 레이블과 위치로 충분히 알 수 있다면 예외로 보기도 해요. 체크박스·라디오 버튼의 테두리, 토글 스위치의 켜짐/꺼짐 상태, 차트의 선과 막대 색도 모두 이 기준 대상이에요.

실수 5. 다크 모드는 따로 검사하지 않는 것

다크 모드를 만들 때 라이트 모드의 색을 그대로 가져가거나, 단순히 배경만 어둡게 바꾸는 경우가 많아요. 그러면 라이트에서 잘 통과하던 색이 다크에서 무너져요.

어두운 배경에서는 같은 색 계열에서 더 밝은 단계를 써야 해요. 반대로 다크 모드에서 순백(#FFFFFF)을 본문에 쓰면 18.73:1로 대비가 너무 강해 번져 보인다는 피드백도 많아서, #E0E0E0(#121212 위 14.19:1)처럼 살짝 낮추는 경우가 많아요. 대비는 "높을수록 무조건 좋다"보다 기준은 넘기되 눈이 편한 범위를 찾는 게 목표예요.

실수 6. 색에만 의존한 정보 전달

대비율과 별개로 WCAG 1.4.1은 색만으로 정보를 구분하지 말라고 해요. 색각 이상이 있는 사람에게는 빨강과 초록이 비슷하게 보일 수 있거든요.

• 본문 속 링크를 색으로만 구분한다면, 링크색과 주변 글자색 사이에도 3:1 이상 차이가 있어야 해요. 가장 쉬운 방법은 밑줄을 남기는 거예요.
• 입력 오류를 빨간 테두리로만 알리지 말고, 아이콘과 "휴대폰 번호 형식을 확인해 주세요" 같은 문구를 함께 보여 주세요.
• 차트는 색 대신 선 모양(실선·점선), 직접 붙인 라벨, 패턴을 같이 쓰면 색을 구분하기 어려운 사람도 읽을 수 있어요.

실수 7. 이미지·그라데이션 위의 글자와 상태 변화

배너 이미지나 그라데이션 위에 글자를 올리면 위치마다 배경 밝기가 달라요. 이때는 글자 뒤에서 가장 밝은(또는 가장 어두운) 지점을 기준으로 검사해야 해요. 글자 뒤에 반투명 검정 레이어(예: rgba(0,0,0,0.5))를 깔면 안정적으로 대비를 확보할 수 있어요.

마우스를 올렸을 때(hover), 키보드로 포커스했을 때(focus), 선택됐을 때(selected)처럼 상태가 바뀐 색도 각각 검사 대상이에요. 특히 포커스 테두리는 키보드 사용자에게 현재 위치를 알려 주는 유일한 표시라서, 주변 배경과 3:1 이상 차이가 나야 해요. 비활성(disabled) 버튼은 대비 기준의 예외지만, 너무 흐리면 "왜 안 눌리지?" 하는 혼란을 주니 적당히 구분되게 두세요.

대비 검사를 습관으로 만드는 방법

1. 디자인 단계: 색 팔레트를 정할 때 글자색 × 배경색 쌍을 표로 만들고 대비율을 적어 둬요. 통과하지 못하는 쌍은 아예 쓰지 않는다는 규칙을 정해요.
2. 개발 단계: 브라우저 개발자 도구의 요소 검사에서 글자색을 누르면 대비율이 함께 나와요. 의심되는 조합은 색상 대비 검사기에 넣어 통과하는 가장 가까운 색을 찾으면 빨라요.
3. QA 단계: 라이트·다크 두 테마, hover·focus 상태까지 화면을 돌며 확인해요. 자동 검사 도구는 이미지 위 글자나 상태 변화를 놓칠 수 있어 눈 확인이 꼭 필요해요.

색 코드를 HEX·RGB·HSL로 바꾸거나 한 색의 밝기 단계를 만들고 싶다면 색상 코드 변환기를, 디자인 시스템의 색 단계를 체계적으로 만드는 방법은 디자인 시스템 컬러 스케일 만들기를 참고하세요.

자주 묻는 질문

버튼 글자도 4.5:1을 맞춰야 하나요?

네. 버튼 안 글자도 텍스트라서 4.5:1이 기준이에요. 글자가 굵게 18.66px 이상이거나 24px 이상이면 큰 글자로 보고 3:1만 넘으면 돼요. 버튼의 테두리나 배경 영역 자체는 주변 배경과 3:1(비텍스트 대비)을 따져요.

placeholder도 명도 대비 기준 대상인가요?

대상이에요. placeholder도 화면에 보이는 텍스트이기 때문에 4.5:1을 맞춰야 해요. 흰 배경이라면 #767676보다 어두운 회색을 쓰고, 꼭 알아야 하는 입력 형식은 placeholder 대신 입력창 밖 도움말로 보여 주는 게 좋아요.

다크 모드에서도 같은 기준인가요?

같아요. 배경이 어두워도 본문 4.5:1, 큰 글자·UI 요소 3:1이에요. 다만 같은 색이 배경에 따라 대비율이 크게 달라지기 때문에 라이트와 다크 테마를 따로 검사해야 해요. 흰 배경에서 통과한 링크 파랑이 다크에서 미달인 경우가 흔해요.

대비율이 4.49면 통과로 봐도 되나요?

안 돼요. WCAG는 반올림으로 기준을 넘기는 걸 허용하지 않아요. 4.49:1은 미달이에요. 검사 도구마다 소수점 처리가 달라 4.5로 보일 수 있으니, 경계에 걸린 색은 한 단계 더 어둡게(또는 밝게) 잡는 게 안전해요.

로고와 비활성 버튼은 왜 예외인가요?

로고는 브랜드 표시로 정해진 디자인이고, 비활성 버튼은 지금 조작할 수 없다는 상태 자체를 흐리게 보여 주는 거라 WCAG가 대비 기준에서 빼 줬어요. 그래도 비활성 상태의 의미를 알아볼 수 있을 정도로는 보이게 하는 게 좋아요.

정리

색상 대비 실수는 대부분 밝은 버튼 위 흰 글자, 연한 placeholder, 회색 카드 위 보조 텍스트, 연한 입력창 테두리, 다크 모드 다섯 곳에서 나와요. 기준은 본문 4.5:1, 큰 글자와 UI 요소 3:1이고, 반드시 실제로 겹치는 글자색·배경색 쌍으로 검사해야 해요. 고칠 때는 색감을 유지한 채 밝기만 한두 단계 바꾸는 것만으로도 대부분 해결돼요.

지금 쓰는 색 조합을 바로 확인하려면 색상 대비 검사기에 넣어 보세요. AA·AAA 통과 여부와 미리보기, 기준을 넘는 가장 가까운 색을 함께 보여 줘요.