이런 분께
브랜드 색으로 버튼·배너를 만들었는데 "글씨가 잘 안 보여요" 소리를 듣는 디자이너, 개발자에게 넘기기 전에 색 조합을 한 번 점검하고 싶은 분께 맞아요.
결론부터 말하면, 색상표를 CSV로 만들어 클로드(Claude)에 올리고 "코드로 계산해 줘"라고 하면 돼요. 눈대중이 아니라 W3C가 정한 공식으로 대비값을 내 주거든요.
끝나면 이렇게 됩니다
예시 색상표 6줄을 올려 실제로 계산한 결과예요.
| 용도 | 글자색 | 배경색 | 대비 | 판정 |
|---|---|---|---|---|
| 버튼 글자 | #FFFFFF | #14B8A6 | 2.49 | 다시 고르기 |
| 본문 | #333333 | #FFFFFF | 12.63 | 본문 OK |
| 보조 설명 | #9CA3AF | #FFFFFF | 2.54 | 다시 고르기 |
| 경고 문구 | #EF4444 | #FFF7ED | 3.54 | 큰 글자만 |
| 배너 제목 | #FFFFFF | #0F766E | 5.47 | 본문 OK |
| 링크 | #2563EB | #F3F4F6 | 4.70 | 본문 OK |
고칠 색 제안도 다시 계산해서 붙여 줘요.
- 버튼 배경 #14B8A6 → #0F766E: 5.47
- 보조 설명 글자 #9CA3AF → #6B7280: 4.83
- 경고 문구 글자 #EF4444 → #DC2626: 4.55
준비물
- 클로드 무료 요금제 이상(claude.ai 로그인). 2026년 10월 기준 무료 요금제도 「Code execution and file creation」(코드 실행·파일 만들기)이 기본으로 켜져 있어요.
- 색상표 CSV 파일. 엑셀이나 구글 시트에 「용도, 글자색, 배경색」 세 열로 적고 CSV로 저장하면 돼요. 색은 #으로 시작하는 HEX 값으로 적어요.
따라 하기
- 엑셀에 첫 줄 제목을 「용도」「글자색」「배경색」으로 적고, 아래에 조합을 한 줄씩 적어요. 「파일」→「다른 이름으로 저장」에서 「CSV UTF-8」로 저장해요.
- claude.ai에서 왼쪽 아래 이름을 눌러 「Settings」→「Capabilities」로 가서 「Code execution and file creation」이 켜져 있는지 봐요. 새 설정 화면에서는 「Create and edit files」로 보일 수 있어요.
- 새 대화를 열고 입력창 왼쪽 아래 「+」→「Add files or photos」로 CSV를 올려요.
- 아래 프롬프트를 붙여 넣고 보내요.
- 답에 계산 코드가 돌아간 흔적(분석 과정)이 있는지 보고, 결과 표와 CSV 파일을 내려받아요.
- 제안 색이 브랜드 느낌과 너무 다르면 "배경색은 그대로 두고 글자색만 바꿔서 다시 제안해 줘"처럼 조건을 바꿔 다시 받아요.
복사해서 쓰는 프롬프트
첨부한 CSV는 우리 브랜드에서 쓰는 글자색·배경색 조합이야.
열 이름: [용도, 글자색, 배경색]
1. 조합마다 WCAG 2.2 기준 명도 대비(contrast ratio)를 코드로 계산해 줘. 눈대중으로 추정하지 마.
2. 결과 표 열: 용도 | 글자색 | 배경색 | 대비 | 판정
판정: 4.5 이상 "본문 OK", 3 이상 4.5 미만 "큰 글자만", 3 미만 "다시 고르기"
3. "큰 글자만"과 "다시 고르기"인 줄은 글자색이나 배경색 중 하나만 바꿔 4.5를 넘기는 색을 원래 색과 가장 비슷하게 제안하고, 바꾼 뒤 대비도 다시 계산해 줘.
4. 결과 표를 CSV 파일로 만들어 줘.