색 대비 검사기

휘도는 언제나 남는 통로

색에는 설계자가 기댈 수 있는 두 성분이 있습니다. 색상과 명도입니다. 그러나 이용자 전체에게 믿을 수 있는 것은 그중 하나뿐입니다.

색상 변별은 편차가 큽니다. 남성 열두 명 가운데 대략 한 명이 적록 색각 이상을 지니며, 그에게는 여러분에게 명백해 보이는 색상 차이가 아무 정보도 나르지 않을 수 있습니다. 명도 변별은 훨씬 고릅니다. 색각 이상이 있는 사람, 시력이 떨어진 사람, 뙤약볕에서 색이 씻긴 휴대전화 화면을 보는 사람, 시각이 완전히 전형적인 사람이 모두 큰 명도 차이를 큰 차이로 지각합니다.

그래서 대비비가 접근성에서 하중을 떠받치는 지표가 됩니다. 두 색의 명도 관계를 재고 색상은 완전히 무시하는데, 바로 그것이 바라는 바입니다. 색상이라는 통로를 믿을 수 없을 때 무엇이 남는지를 알려 주기 때문입니다.

비율은 두 색의 상대 휘도가 같아 경계가 누구에게도 보이지 않는 1 대 1부터, 순백 위의 순흑인 21 대 1까지 걸쳐 있습니다. 계산은 WCAG에 정확히 정의돼 있습니다. sRGB의 각 채널을 선형 광으로 바꾸고, 지각 휘도에 대한 기여에 따라 채널에 가중치를 주고, 밝은 쪽 결과와 어두운 쪽 결과를 견줍니다.

기준값과 그 근거

4.5 대 1 — 일반 본문(WCAG AA). 본문의 기준선입니다. 이 수치는 대략 20/40 시력과 결부된 대비 감도 저하에서 도출되었습니다. 고령자에게 흔하고 교정할 수 있으나 흔히 교정되지 않은 상태입니다.

3 대 1 — 큰 글자(WCAG AA). 18포인트 보통 또는 굵은 14포인트부터 적용됩니다. 큰 글자는 획이 두꺼워 낮은 대비에서도 읽힙니다.

3 대 1 — 비텍스트 대비(WCAG AA). 인터페이스 구성요소와 의미 있는 그래픽을 다룹니다. 입력란 테두리, 토글 상태, 초점 표시, 정보를 전하는 아이콘, 도표의 핵심 부분 등입니다. 가장 자주 놓치는 기준이며, 시각적으로 세련되고 대비가 낮은 인터페이스가 감사에서 걸리는 지점도 대개 여기입니다.

7 대 1과 4.5 대 1 — 일반 본문과 큰 글자(WCAG AAA). 대략 20/80 시력을 겨냥한 더 엄격한 수준입니다. 의무가 아니더라도 긴 글에는 채택할 가치가 있습니다.

대비는 필요하지만 충분하지 않다

접근 가능한 배색 작업에서 가장 흔한 잘못은 대비비를 통과한 시점을 작업의 끝으로 여기는 것입니다. 답해야 할 독립된 물음이 둘 있습니다.

1. 각 색이 자기 배경 위에서 읽히는가? 그것이 대비이며 이 검사기가 답합니다.
2. 서로 다른 뜻을 지닌 색들이 서로 구별되는가? 그것은 색상 분리이며 대비비는 이에 대해 아무 말도 하지 않습니다.

빨간 계열과 초록 계열이 있는 도표는 둘 다 흰 바탕에서 어두우므로 대비를 넉넉히 통과하면서도, 두 계열이 서로 구별되지 않아 제2색각인 사람에게는 전혀 읽히지 않을 수 있습니다. 그런 배색은 색각 시뮬레이터에도 통과시키십시오.

그리고 색이 의미를 나를 때는 언제나 두 번째 단서를 더하십시오. WCAG의 색 사용 기준이 그것을 요구하며, 기법 G111이 표준적인 방식을 서술합니다. 색을 무늬, 형태, 위치 또는 명시적 라벨과 짝짓는 것입니다. 실제로는 색 범례 대신 도표 계열에 직접 라벨을 붙이고, 빨간 오류 메시지 옆에 아이콘을 두고, 본문 속 링크에 밑줄을 긋고, 성공과 실패 상태를 형태로도 구분하는 일을 뜻합니다.

검사기와 함께 작업하기

전경색과 배경색을 입력하면 도구가 비율과 충족한 기준값을 알려 줍니다. 몇 가지 습관이 유용성을 높입니다.

• 실제 조합을 시험하십시오. 반투명 겹침, 그러데이션, 배경 이미지가 있으면 실효 배경은 스타일시트의 색이 아닙니다. 실제로 그려지는 것에서 표본을 뜨십시오.
• 두 테마를 모두 시험하십시오. 휘도는 깔끔하게 뒤집히지 않습니다. 어두운 배색에는 자체 점검이 필요합니다.
• 그러데이션에서는 최악의 지점을 시험하십시오. 평균이 아닙니다.
• 비활성 상태와 안내 문구도 포함하십시오. 그것들도 읽힙니다.
• 초점 표시는 나타나는 모든 표면에 대해 시험하십시오. 흰 바탕에서 3 대 1을 채우는 초점 테두리가 카드 위에서는 사라질 수 있습니다.

전체 그림은 색각 이상을 고려한 설계가 배색 구성을 다루고, 도표를 접근 가능하게 만들기가 데이터 시각화를 구체적으로 다룹니다.