contrast() 함수
[정의]
두 색깔 중 어느 것이 다른 것과 더 대비되는 색인지 반환.
이는 배경에서 색상을 읽을 수 있도록 해, 접근성 준수에 유용.
SASS용 Compass의 contrast 함수와 동일한 방식으로 작동.
WCAG 2.0에 따라, 색상은 명도(=밝기)가 아닌 감마 보정된 luma 값을 사용해 비교.
명암 매개 변수는 어느 순서로든 제공 가능. 이 함수는 luma 값을 계산하고 명암을 자동으로 할당. (즉,이 함수 사용해 순서를 반대로하여 대비가 가장 낮은 색상을 선택하는 건 불가함.)
[구문]
contrast(color, dark, light, threshold)
[매개변수]
color
필수. 대비할 색상.
dark
선택. 지정된 어두운 색. (기본값: 검정색)
light
선택. 저정된 밝은 색. (기본값: 흰색)
threshold
선택. "어두움"에서 "밝음"으로의 전환 위치 (= 임계점) 나타내는 백분율. (0~100%) (기본값: 43 %, SASS와 일치).
(예제)
50 % 회색 배경이 검은 색 또는 흰색 텍스트로 표시되어야하는지 여부를 결정할 수 있도록 대비를 어떤 방식으로든 편향시키는 데 사용. 일반적으로 '밝은'팔레트에는이 값을 낮게 설정하고 '더 어두운'팔레트에는 높게 설정.
[반환값]
다른 것과 가장 대비되는 색 반환.
[예제]
p {
a: contrast(#bbbbbb);
b: contrast(#222222, #101010);
c: contrast(#222222, #101010, #dddddd);
d: contrast(hsl(90, 100%, 50%), #000000, #ffffff, 30%);
e: contrast(hsl(90, 100%, 50%), #000000, #ffffff, 80%);
}
반환값:
p {
a: #000000 // black
b: #ffffff // white
c: #dddddd
d: #000000 // black
e: #ffffff // white
}
PS. 마지막 예처럼, 임계값 사용해 대비가 낮은 결과를 허용 가능하나, 흰색 바탕에 흰색 또는 검은색 바탕에 검은색이 아닐 수도 있음 확인 가능.
PS.
LESS contrast() 함수
http://lesscss.org/functions/#color-operations-contrast
