light-or-dark()

색 밝기 검사 유틸리티 함수

용도

전달 받은 색의 명도 대비 값을 확인하여 "밝은 색"인지 "어두운 색"인지 분별하여 값을 반환해야할 때 사용합니다.

light-or-dark() 함수는 Programming Sass to Create Accessible Color Combinations을 통해 공개된 접근성 색상 유틸리티 함수 중 하나입니다.

사용법

light-or-dark() 함수에 밝기를 확인 할 색상을 전달합니다.

light-or-dark($color:color) → string

@debug light-or-dark(#6fa2d1); // 'light' 출력
@debug light-or-dark(#b84048); // 'dark' 출력

매개변수(parameter)	유형(type)	필수(required)	기본 값(default)
$color	color	✔︎

로직

light-or-dark() 유틸리티는 다음의 로직에 의해 작성되었습니다.

@function light-or-dark($color) {
  $light-contrast: color-contrast($color, $white);
  $dark-contrast: color-contrast($color, $black);

  @if $light-contrast > $dark-contrast {
    @return 'dark';
  } @else {
    @return 'light';
  }
}

1. 전달 받은 색과 흰색, 검정색의 명도 대비 값을 각 대비 변수에 할당

2. 밝은 대비 값이 어두운 대비 값보다 클 경우 'dark' 문자 값 반환

3. 밝은 대비 값이 어두운 대비 값보다 작거나 같을 경우 'light' 문자 값 반환

참고

유틸리티 함수 로직에 사용된 Sass 빌트인 모듈은 다음과 같습니다.

• @function

• @if / @else

유틸리티 함수 로직에 사용된 유틸리티 모듈은 다음과 같습니다.

• color-contrast()