전체 인구의 약 8%가 색각 이상을 가지고 있습니다. 웹사이트가 이 사용자들에게도 제대로 보이려면 색상 선택에 주의가 필요합니다. 접근성 높은 색상 조합을 알아봅니다.
피해야 할 조합
빨강-초록 조합이 가장 문제가 됩니다. 적록 색맹 사용자는 이 두 색을 구분하기 어렵습니다. 버튼의 성공/실패 상태를 빨강-초록으로만 표시하면 안 됩니다.
안전한 대안
파랑-주황 조합은 대부분의 색각 이상자도 구분할 수 있습니다. 또한 색상만으로 정보를 전달하지 말고 아이콘, 텍스트, 패턴을 함께 사용하세요. 색상 변환기에서 색상을 확인하고 시뮬레이터로 테스트해보세요.
대비율 확보
WCAG AA 기준 4.5:1, AAA 기준 7:1 대비율을 확보하면 색각 이상 여부와 관계없이 가독성이 좋아집니다.
디자이너와의 협업
대비 문제가 발생하면 개발자 혼자 색상을 바꾸지 마세요. 디자이너와 논의해서 브랜드 가이드와 접근성을 모두 만족하는 대안을 찾아야 합니다. 색상 변환기로 여러 대안을 만들어서 제시하면 논의가 수월합니다.
접근성을 위한 디자인 시스템
처음부터 접근성을 고려한 색상 팔레트를 만드는 것이 가장 좋습니다. 각 색상에 대해 안전하게 조합할 수 있는 색상을 문서화하세요. 예를 들어 primary-500 위에는 white만, primary-100 위에는 primary-900만 사용 가능하다고 명시하면 실수를 방지할 수 있습니다.
실용적인 팁
색상 작업을 할 때 자주 쓰는 값들은 메모장이나 노션에 정리해두세요. 매번 검색하는 시간을 아낄 수 있습니다. 색상 변환기를 북마크해두면 필요할 때 바로 접속할 수 있습니다.