정의 및 사용 방법

accent-color 속성은
브라우저가 기본 스타일을 제공하는 체크박스, 라디오 버튼, 슬라이더, 프로그레스 바 등의
사용자 인터페이스 요소에 적용되어 있는 강조 색상을 변경하는 데 사용됩니다.

accent-color 속성을 활용하면 웹 페이지 전체에 일관된 색상 테마를 적용하여 시각적인 통일성을 높일 수 있습니다.

기본 예제

accent-color 속성의 사용을 CSS 라이브 데모로 살펴보겠습니다.

CSS 라이브 데모: accent-color 데모 버튼을 클릭해 보세요!

브라우저가 강조 색상을 적용하는 HTML의 사용자 인터페이스 요소는 다음과 같습니다.

브라우저마다 각각의 제공하는 강조 색상이 있습니다. 이 강조 색상은 브라우저마다 조금씩 차이가 있을 수 있습니다.

형식 구문

CSS 
selector {
    accent-color: auto | <color>;
}

구문

CSS 
/* 키워드 값 */
accent-color: auto; /* 초깃값 */
accent-color: currentcolor; /* 현재 요소의 글자색 */

/* 색상 값 */
accent-color: blue;
accent-color: #00a0e9;
accent-color: rgb(0 200 0);
accent-color: hsl(228deg 6% 24% / 0.8);

/* 글로벌 값 */
accent-color: inherit;
accent-color: initial;
accent-color: unset;
accent-color: revert;
accent-color: revert-layer;

형식 정의

accent-color 속성의 형식 정의
초깃값 auto
(브라우저가 기본으로 지원하고 있는 강조 색상)
상속 예
애니메이션 예

예제

예제를 통해서 accent-color 속성의 특징을 살펴보겠습니다.

체크박스

HTML 
<p>체크되어 있지 않은 체크박스</p>
<input type="checkbox">
<hr>
<p>체크되어 있는 체크박스</p>
<input type="checkbox" checked>

checked는 체크박스가 기본적으로 체크되어 있는지 여부를 나타내는 속성입니다. 페이지가 처음 로드될 때 체크박스가 체크된 상태로 시작하려면 checked 속성을 사용합니다.

CSS 
[type="checkbox"] {
    width: 50px;
    height: 50px;
    accent-color: red;
}

체크박스에서 '강조 색상'이란 체크박스가 체크된 상태일 때의 색상을 말합니다.

브라우저에서 실제 표시된 모습

라디오 버튼

HTML 
<p>체크되어 있지 않은 라디오 버튼</p>
<input type="radio">
<hr>
<p>체크되어 있는 라디오 버튼</p>
<input type="radio" checked>

checked는 라디오 버튼이 기본적으로 체크되어 있는지 여부를 나타내는 속성입니다. 페이지가 처음 로드될 때 라디어 버튼이 체크된 상태로 시작하려면 checked 속성을 사용합니다.

CSS 
[type="radio"] {
    width: 50px;
    height: 50px;
    accent-color: red;
}

라디오 버튼에서 '강조 색상'이란 라디오 버튼이 체크된 상태일 때의 색상을 말합니다.

브라우저에서 실제 표시된 모습

주의할 점

강조 색상의 주변 색상은 시각적으로 가독성과 대비를 보장하기 위해서 브라우저가 자동으로 색상을 변형할 수 있습니다.
이때 자동으로 변형하는 색상은 플랫폼이나 브라우저마다 조금씩 차이가 있을 수 있습니다.

CSS 
[type="checkbox"] {
    width: 50px;
    height: 50px;
    accent-color: yellow;
}

브라우저에서 실제 표시된 모습을 보면, accent-color: yellow;로 설정해서 강조색이 밝습니다. 이때, 체크 아이콘 모양은 가독성과 대비를 보장하기 위해서 브라우저가 자동으로 색상을 지정할 수 있습니다. 이때 자동으로 변형하는 색상은 플랫폼이나 브라우저마다 조금씩 차이가 있을 수 있습니다.

브라우저에서 실제 표시된 모습

브라우저 호환성

accent-color 속성의 브라우저 호환성
속성
데스크탑 Chrome
Chrome
데스크탑데스크탑 Edge
Edge
데스크탑 Firefox
Firefox
Safari
Safari
accent-color 93 93 92 15.4

명세서

accent-color 속성의 명세서 사양
명세서 사양
accent-color CSS Basic User Interface Module Level 4
#widget-accent

참고문헌

같이 보기