CSS / Reference / accent-color

accent-color는 지원되는 체크박스·라디오·범위 입력·progress 같은 기본 UI의 강조색을 지정합니다. 모든 폼 요소와 모든 상태를 같은 색으로 만드는 기능은 아니며, 구체적인 모양과 대비 처리는 브라우저와 운영체제에 따라 달라집니다.

문법과 주요 값

input, progress { accent-color: #006c9c; }

값의 적용 범위와 문법은 MDN의 accent-color 문서에서 확인할 수 있습니다.

실행 예제와 결과 비교

아래 전체 코드를 UTF-8 형식의 accent-color-example.html 파일로 저장한 뒤 브라우저로 여세요. 예제용 CSS는 이 파일 안에만 넣고 사이트 전체 스타일시트에 그대로 붙여 넣지 않습니다.

<!doctype html>
<html lang="ko">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>accent-color 비교 예제</title>
<style>
body { margin: 0; color: #20242b; background: #fff; font: 16px/1.7 "Malgun Gothic", sans-serif; }
#demo { padding: 24px; max-width: 820px; margin: auto; }
h1 { font-size: 22px; margin: 0 0 20px; }
.samples { display: flex; flex-wrap: wrap; gap: 24px; }
.label { margin: 0 0 8px; font-weight: 700; }
.target, .reference { width: 220px; padding: 12px; border: 1px solid #718096; }
.target { accent-color: #006c9c; }
.reference { accent-color: #a03c00; }
label { display: block; }
input[type="range"], progress { width: 180px; }
</style>
</head>
<body>
<main id="demo">
<h1>accent-color 적용 비교</h1>
<section class="samples"><div class="a"><p class="label">파란 강조색</p><div class="target"><label><input type="checkbox" checked> 선택 항목</label><label><input type="radio" checked> 라디오 선택</label><input type="range" value="60" aria-label="범위 값"><progress value="60" max="100">60%</progress></div></div><div class="b"><p class="label">주황 강조색</p><div class="reference"><label><input type="checkbox" checked> 선택 항목</label><label><input type="radio" checked> 라디오 선택</label><input type="range" value="60" aria-label="범위 값"><progress value="60" max="100">60%</progress></div></div></section>
</main>
</body>
</html>

현재 브라우저가 지원하는 체크·라디오·범위·진행 표시의 강조 부분을 비교합니다. 기본 UI의 테두리, 배경과 선택하지 않은 상태까지 전부 같은 색이 되는 것은 아닙니다.

기본 UI를 유지하는 접근

accent-color는 기본 컨트롤을 유지하면서 색을 요청하는 기능입니다. appearance: none으로 기본 모양을 제거하면 기대한 강조색 부분이 없어질 수 있습니다. 완전한 맞춤 UI와 달리 키보드 조작과 기본 상태 표현을 그대로 활용하기 쉽습니다.

대비와 환경별 차이

브라우저는 선택한 색의 대비에 맞춰 내부 표시 색을 조절할 수 있습니다. 고대비·강제 색상 모드와 운영체제 기본 테마에서도 모습이 달라질 수 있으므로 정확한 픽셀이나 모든 브라우저의 같은 색을 보장하지 않습니다. 중요한 선택 상태에는 실제 checked 값과 라벨도 함께 있어야 합니다.

적용되지 않거나 예상과 다를 때

• 선택 전후와 disabled 상태를 각각 비교합니다.
• 색이 안 바뀌면 해당 요소 유형의 지원과 appearance 규칙을 확인합니다.

관련 설정을 함께 조정할 때는 색 값과 currentColor을 참고하세요.