> For the complete documentation index, see [llms.txt](https://yamoo9.gitbook.io/scss-mixins/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://yamoo9.gitbook.io/scss-mixins/utilities/colors/light-or-dark.md).

# light-or-dark()

색 밝기 검사 유틸리티 함수

## 용도 <a href="#use" id="use"></a>

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

{% hint style="info" %}
light-or-dark() 함수는 [Programming Sass to Create Accessible Color Combinations](https://css-tricks.com/programming-sass-to-create-accessible-color-combinations/)을 통해 공개된 접근성 색상 유틸리티 함수 중 하나입니다.
{% endhint %}

## 사용법 <a href="#usage" id="usage"></a>

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

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

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

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

## 로직 <a href="#logic" id="logic"></a>

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

```javascript
@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' 문자 값 반환

## 참고 <a href="#reference" id="reference"></a>

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

* [@function](https://sass-lang.com/documentation/at-rules/function)
* [@if / @else](https://sass-lang.com/documentation/at-rules/control/if)

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

* [color-contrast()](/scss-mixins/utilities/colors/color-contrast.md)