CSS / Reference / accent-color

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

문법과 주요 값

초기값은 브라우저 기본 스타일시트가 HTML 요소에 적용한 값과 같다는 뜻이 아닙니다. 실제 값은 개발자 도구의 Computed에서 확인하세요.

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" name="accent-option" checked> 라디오 선택</label><input type="range" value="60" aria-label="범위 값"><label for="progress-1">예제 진행률</label><progress id="progress-1" 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" name="reference-option" checked> 라디오 선택</label><input type="range" value="60" aria-label="범위 값"><label for="progress-2">예제 진행률</label><progress id="progress-2" value="60" max="100">60%</progress></div></div></section>
</main>
</body>
</html>

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

기본 UI를 유지하는 접근

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

대비와 환경별 차이

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

한 가지 설정씩 바꾸어 확인하기

앞의 전체 코드를 저장한 예제 파일을 사용합니다. 지정한 선택자의 CSS만 변경하고, 서로 다른 비교 조건을 한꺼번에 바꾸지 않습니다.

1. 예제의 체크박스를 선택·해제하고 Tab/Space로도 조작합니다. 라디오는 서로 다른 독립 예시이며 이름도 분리했습니다. 진행률에는 의미가 분명한 label을 연결했습니다.
2. disabled 상태를 잠시 추가해 색과 조작을 비교하고 복구합니다. appearance:none을 쓰면 기본 강조 부분이 없어질 수 있으며 모든 OS에서 같은 색·모양을 보장하지 않습니다.

관련 조건은 progress의 접근 가능한 이름에서 확인할 수 있습니다.

폼의 상태·레이블·키보드 초점을 함께 설계하려면 폼 상태와 키보드 초점 꾸미기를 참고하세요. 본문의 조건과 함께 비교할 관련 속성은 color입니다.

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

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