웹·CSS·색상

그라디언트나 박스섀도 CSS 코드를 손으로 값 하나하나 조정하며 짜기보다, CSS 스타일 생성기에서 슬라이더로 눈으로 보며 조정한 뒤 완성된 코드를 그대로 복사하는 편이 빠릅니다.

글자색과 배경색의 명암비가 웹 접근성 기준을 만족하는지 확인해야 한다면 색상 대비 검사기가 WCAG AA·AAA 등급을 자동으로 판정해 주고, 디자인 시안에서 뽑은 HEX 값을 코드에 쓸 RGB나 HSL로 바꿔야 할 때는 색상 코드 변환·팔레트 도구를 씁니다.

세 도구 모두 결과를 실시간으로 보여줘 값을 하나 바꿀 때마다 새로고침할 필요 없이 바로 차이를 확인할 수 있습니다.

CSS 값을 코드로 옮길 때 자주 생기는 실수는 슬라이더로 맞춘 결과가 브라우저마다 다르게 렌더링될 수 있다는 점을 잊는 것입니다. box-shadow나 그라디언트는 대부분 표준이라 문제가 적지만, 실제 배포 전에는 최소 한 번은 다른 브라우저에서 미리보기로 점검해 두는 쪽이 탈이 없습니다. 색상 대비를 검사할 때 흔히 놓치는 부분은 본문 글자와 버튼 글자의 기준이 다르다는 점인데, WCAG는 일반 텍스트(AA 4.5:1)와 큰 텍스트·UI 요소(AA 3:1)에 서로 다른 최소 비율을 요구하므로 검사 결과를 볼 때 어떤 기준이 적용됐는지 함께 확인해야 합니다.