[ColorO_F] LESS - contrast() 함수 - 대비색 찾기. (= 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