색과 단위

흰 바탕에 연회색 #bbbbbb 글자는 대비가 1.92 대 1입니다. WCAG는 보통 크기 글자에 최소 4.5 대 1을 요구합니다.

색을 쓰는 방법

CSS는 여러 표기법으로 색을 받지만, 결국 모두 화면의 빨강·초록·파랑 빛의 양이 됩니다. red, navy, rebeccapurple 같은 이름 있는 색은 읽기 쉽지만 가짓수가 적습니다. 16진수 표기는 빨강, 초록, 파랑을 각각 00에서 ff(0에서 255)까지 두 자리로 씁니다. #1a5fb4는 빨강 26, 초록 95, 파랑 180인 중간 파랑입니다. rgb(26 95 180)은 같은 색을 10진수로 쓴 것입니다. hsl(210 80% 40%)은 색상(색상환의 각도. 0은 빨강, 120은 초록, 240은 파랑), 채도, 명도로 색을 나타내므로, 숫자 하나만 바꿔 같은 색상의 더 밝거나 어두운 색을 만들기 쉽습니다.

color: navy;
color: #1a5fb4;              /* same as #1A5FB4 */
color: #36c;                 /* short form of #3366cc */
color: rgb(26 95 180);
color: rgb(26 95 180 / 50%); /* half transparent */
color: hsl(210 80% 40%);
background-color: transparent;

빗금 뒤의 네 번째 값은 알파(불투명도)입니다. rgb(0 0 0 / 50%)는 반만 불투명한 검정이라 뒤에 있는 것이 비쳐 보입니다. color는 글자 색, background-color는 요소 뒤를 채우는 색, border-color는 테두리 색을 정합니다. currentColor 키워드는 그 요소의 글자 색을 뜻해서, 글자와 색을 맞춰야 하는 아이콘이나 테두리에 편합니다.

대비는 선택이 아닙니다

글자와 배경의 밝기가 너무 비슷하면 많은 사람이 읽기 힘듭니다. 저시력인 사람, 나이 든 독자, 햇빛 아래서 휴대전화를 보는 모든 사람이 그렇습니다. W3C의 접근성 지침 WCAG 2.2는 이를 1 대 1(차이 없음)에서 21 대 1(흰 바탕의 검은 글자)까지의 대비율로 잽니다. 성공 기준 1.4.3은 보통 글자에 최소 4.5 대 1, 큰 글자에 3 대 1을 요구하며, WCAG가 말하는 큰 글자는 18포인트 이상 또는 굵은 14포인트 이상입니다. 흰 바탕에 진한 회색 #767676은 4.54 대 1로 아슬아슬하게 통과하고, #777777은 4.48 대 1로 아슬아슬하게 못 미칩니다. 브라우저 개발자 도구로 글자 요소를 검사하면 대비율이 나오므로 짐작할 필요가 없습니다.

색만으로 정보를 전해서도 안 됩니다. 테두리를 빨갛게 바꿔서만 오류를 표시하는 입력 양식은 빨간색을 잘 보지 못하는 사람을 빼놓게 됩니다. 오류 문구나 아이콘을 함께 넣으세요.

절대 단위와 상대 단위

길이에는 0을 빼고 단위가 필요합니다. px는 CSS 픽셀로 고정 단위입니다. 고해상도 화면에서는 CSS 픽셀 하나가 실제 화소 여러 개를 덮어서, 눈에 보이는 크기가 대체로 비슷하게 유지됩니다. 상대 단위는 다른 값에 따라 커지거나 작아집니다. em은 그 요소의 글자 크기가 기준이므로, 20픽셀 글자의 padding: 0.5em은 10픽셀입니다. rem은 루트(html) 글자 크기가 기준이고, 읽는 사람이 바꾸지 않았다면 브라우저에서 16픽셀이라 1.25rem은 보통 20픽셀입니다. %는 부모, 대개 부모의 너비가 기준입니다. vw와 vh는 뷰포트 너비와 높이의 100분의 1이고, ch는 현재 글꼴에서 숫자 0의 너비입니다.

어느 것을 쓸까요? 글자 크기를 rem으로 정하면 읽는 사람의 설정을 존중하게 됩니다. 브라우저 글자를 크게 설정하면 rem으로 정한 것은 모두 함께 커지지만, px로 고정한 글자는 그렇지 않을 수 있습니다. em으로 준 안쪽 여백은 감싼 글자와 함께 커집니다. 1픽셀 테두리처럼 커지면 안 되는 것은 픽셀로 써도 됩니다.