How to set input placeholder color

인풋 placeholder 색상 설정하는 방법

&::placeholder 로 색상값을 지정해주면 된다.

크로스브라우징이 필요할 경우에 webkit, ms 프리픽스를 붙여서 사용하면 된다.

 

대부분의 브라우저에서 placeholder 텍스트의 모양은 기본적으로 반투명 또는 밝은 회색이 사용된다.

 

placeholder의 텍스트의 색상과 입력 배경 사이의 명암비가 저시력 상태를 경험하는 사람들이 읽을 수있을 만큼 충분히 높은지 확인하고 사이에 충분한 차이가 있는지 확인하는 것이 중요하다. 

 

색상 명암비는 자리 표시 자 텍스트의 광도와 입력 배경색 값을 비교하여 결정된다.

텍스트 콘텐츠에는 4.5 : 1, 제목과 같은 큰 텍스트에는 3 : 1의 비율이 필요하다. 

큰 텍스트는 18.66px 및 굵은 폰트 이상 또는 24px 이상이 권장된다.