# most-legible-color()

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

특정 배경 색상 위에 검정 또는 하얀색 텍스트를 사용하고 싶을 경우 확인하여 값을 반환 받아야 할 때 사용합니다.

{% hint style="info" %}
most-legible-color() 함수는 [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>

`most-legible-color()` 함수에 전경 또는 배경색을 전달합니다.

> most-legible-color($color:**color**) → **color**

```css
.usage {
  $bg: #cf0102;
  
  background-color: $bg;
  color: most-legible-color($bg); // #fff 출력
}
```

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

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

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

```javascript
@function most-legible-color($color) {
  $color-lod: light-or-dark($color);

  @if ($color-lod == 'dark') {
    @return $white;
  } @else {
    @return $black;
  }
}
```

1. 전달 받은 색상 값의 밝기 모드를 확인하여 `$color-log` 에 값을 할당
2. 할당 받은 값을 확인하여 "어두운" 모드인 경우 색 구성표에 등록된 하얀색을 반환
3. "밝은" 모드일 경우, 색 구성표에 등록된 검정색을 반환

## 참고 <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)

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

* [light-or-dark()](https://yamoo9.gitbook.io/scss-mixins/utilities/colors/light-or-dark)