CSS accent-color 속성 – 브라우저 UI 요소의 기본 강조 색상 변경

`accent-color` 속성의 이해

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

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

실제 적용된 모습: accent-color 데모 버튼을 클릭해 보세요!

70%

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

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

체크박스(<input type="checkbox">)
라디오 버튼(<input type="radio">)
슬라이더(<input type="range">)
프로그레스 바(<progress">)

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

형식 구문

구문

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 속성의 특징을 살펴보겠습니다.

체크박스

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

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

라디오 버튼

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

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

주의할 점

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

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