튜토리얼
Claude Opus 5.5로 브랜드를 유지하며 글자 대비 고치기
Claude Opus 5.5에는 구체적인 글자색과 배경색 조합을 수정하게 하고, 제안한 색은 계산으로 확인하세요.
Claude Opus 5.5에는 구체적인 글자색과 배경색 조합을 수정하게 하고, 제안한 색은 계산으로 확인하세요. 브랜드 인상을 유지하면서 버튼, 작은 설명, 링크를 읽기 쉽게 만들 수 있습니다. 주황색을 전부 갈색으로 바꾸라는 지시보다 색마다 역할을 정하는 편이 유용합니다.
이 글은 재계산 가능한 예시를 포함한 제안 절차이며 Opus 성능 실험이 아닙니다. 공식 프롬프트 안내를 참고해 승인된 로고는 고정하고 지정한 UI 변수만 바꾸도록 결과물을 정의합니다.
분위기 대신 색상 조합을 제공하기
글자와 바로 뒤 배경의 CSS 값, 불투명도, 그라데이션, 크기, 굵기, 상태를 수집합니다. 화면 캡처는 위치 파악에 좋지만 압축과 안티앨리어싱의 영향을 받습니다. 계산에는 실제 색상 값을 쓰세요.
W3C 설명은 일반 글자에 4.5:1, 큰 글자 조건에 해당하면 3:1을 요구합니다. 큰 글자는 일반적으로 보통 굵기 18 pt 이상 또는 굵은 글자 14 pt 이상이며 다른 문자 체계의 동등한 크기도 고려합니다. 미달 값을 반올림해서 통과시키면 안 됩니다. 로고 예외가 브랜드 UI 전체에 적용되지는 않습니다.
| 역할 | 유지할 것 | 변경 후보 |
|---|---|---|
| 승인된 로고 | 원본 도안 | 위치와 주변 여백 |
| 작은 버튼 글자 | 문구와 읽을 수 있는 크기 | 글자색 또는 채움색 |
| 본문 링크 | 의미와 목적지 | 색과 명확한 밑줄 |
| 장식 강조색 | 브랜드 색조 | 내용을 가리지 않으면 그대로 |
호버, 포커스, 누른 상태는 각각 확인합니다. 한 글자 조합의 통과는 전체 접근성 검사를 뜻하지 않습니다. 키보드 동작과 비문자 표시에는 별도 검사가 필요합니다.
주황색 버튼의 계산 예
16 px 흰 글자를 `#FF4E00` 위에 놓는 가상 예를 봅시다. sRGB 채널을 선형화해 상대 휘도를 구하고 `(밝은 값 + 0.05) / (어두운 값 + 0.05)`를 계산하면 약 3.31:1입니다. 일반 글자 기준에는 부족합니다. 같은 배경에 검은 글자는 약 6.34:1입니다. 승인할 때는 반올림 전 값으로 판단하세요.
주황색을 유지하고 글자를 어둡게 하거나, 밝은 글자를 유지하고 동작용 배경을 더 어둡게 만들 수 있습니다. 선명한 주황색은 장식에 남겨도 됩니다. Claude에게 눈대중으로 인증하게 하지 말고 후보와 검증된 계산값을 따로 제시하게 하세요.
읽기 어려운 브랜드 색에 관한 디자이너 질문에도 같은 고민이 있습니다. 독자의 문제를 보여 주지만 전환율 향상의 근거는 아닙니다.
복사해서 쓸 수정 프롬프트
첨부 CSS와 화면의 글자 대비를 검토하세요.
승인된 로고는 고정합니다. 다시 그리거나 팔레트 전체를 교체하지 마세요.
버튼 배경 #FF4E00, 글자 #FFFFFF, 16 px 보통 굵기입니다.
주황색 배경에 어두운 글자를 쓰는 안과 밝은 글자에 더 어두운 동작 배경을 쓰는 안을 만드세요.
정확한 전경/배경 색, 변경할 변수명, 기본/호버/포커스 상태와 최소 CSS 변경을 반환하세요.
코드 실행이 가능하면 WCAG sRGB 휘도 공식으로 계산하세요. 불가능하면 비율을 미검증으로 표시하고 계산기 입력값을 주세요. 통과 수치를 만들지 마세요.
문구, 목적지, 간격, 동작을 유지하고 본문 링크에는 밑줄을 추가하세요.
남은 검사를 별도로 적으세요. 한 조합의 통과로 페이지 전체가 접근성 기준을 충족한다고 말하지 마세요.실제 납품 화면에서 확인하기
복제한 컴포넌트에 한 안을 적용하고 실제 크기로 비교한 뒤 변경한 모든 조합을 다시 계산합니다. 흰 작업판이 아니라 실제 배경을 사용합니다. 반투명 글자는 합성된 색, 그라데이션은 글자 뒤의 해당 범위를 확인해야 합니다.
좁은 폭과 확대된 글자로 읽어 보고 포커스가 보이는지, 누른 상태에서 낮은 대비가 돌아오지 않는지 확인합니다. 승인된 변수표를 결과물과 함께 보관하면 이후 광고와 페이지에도 같은 동작 색을 적용할 수 있습니다.
Panelly 제작으로 연결하기
검증된 색을 정한 뒤 Panelly Studio에서 제품, 배경, 제목, CTA가 포함된 완성 광고를 탐색합니다. 복잡한 사진 위 글자에는 단색 받침 영역을 요청하고 내보낸 이미지를 납품 크기로 확인하세요. Panelly의 Opus 통합이나 접근성 인증 기능을 뜻하지 않습니다.
일관성은 브랜드 스타일 흔들림, 구조 변경은 랜딩 페이지 수정을 참고하세요.
자주 묻는 질문
굵게만 만들면 되나요?
작은 글자를 굵게 해도 자동으로 큰 글자 조건이 되지 않습니다. 실제 크기와 색 조합을 확인합니다.
모든 브랜드 색이 흰색 위에서 통과해야 하나요?
실제 정보를 전달하는 조합을 평가합니다. 장식 강조색과 읽기 쉬운 동작 색은 역할이 달라도 됩니다.
