> 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/a11y-color.md).

# a11y-color()

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

[WCAG 2.1 명도 대비](https://www.w3.org/TR/WCAG21/#contrast-minimum) 기준에 맞춰 AA(4.5:1) 또는 AAA(7:1) 레벨에 맞는 전경색을 자동으로 찾아 제안합니다.

{% hint style="info" %}
a11y-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>

`a11y-color()` 함수에 확인 전경색과 배경색을 차례로 전달합니다. (검사 수준, 글자 크기, 글자 두께는 옵션)&#x20;

> a11y-color($fg:**color**, $bg:**color,** $level:**string**, $size:**number**, $bold:**bool**) → **color**

```css
.usage {
  $bg: #29101e;
  
  background-color: $bg;
  color: a11y-color(#462d3b, $bg);
}
```

| 매개변수(parameter) | 유형(type) | 필수(required) | 기본 값(default) |
| :-------------: | :------: | :----------: | :-----------: |
|       $fg       |   color  |      ✔︎      |               |
|       $bg       |   color  |      ✔︎      |               |
|      $level     |  string  |              |     `'AA'`    |
|      $size      |  number  |              |      `16`     |
|      $bold      |   bool   |              |    `false`    |

위 예시 코드는 아래의 CSS로 컴파일 되어 출력됩니다.

```css
.usage {
  background-color: #29101e;
  color: #bf6397; /* 자동 제안된 전경색 (배경색 대비 4.5:1 이상) */
}
```

자동 제안된 전경색과 배경색 대비를 [color-contrast()](/scss-mixins/utilities/colors/color-contrast.md) 함수를 사용해 확인하면 `4.59:1` 대비차를 출력합니다.

```javascript
@debug color-contrast(#bf6397, #29101e); // 4.59:1
```

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

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

```javascript
@function a11y-color($fg, $bg, $level: 'AA', $size: 16, $bold: false) {
  $font-size: validate-font-size($size);
  $ratio: get-ratio($level, $font-size, $bold);
  $original-contrast: color-contrast($fg, $bg);

  @if $original-contrast >= $ratio {
    @return $fg;
  } @else {
    $fg-lod: light-or-dark($fg);
    $bg-lod: light-or-dark($bg);

    $step: 2%;

    @if $fg-lod == 'light' and $bg-lod == 'light' {
      $step: -$step;
    } @else if $fg-lod == 'dark' and $bg-lod == 'light' {
      $step: -$step;
    }

    @while color-contrast($fg, $bg) < $ratio {
      $fg: scale-color($fg, $lightness: $step, $saturation: $step/2);
    }
    @return $fg;
  }
}
```

1. 필수 인자 값(전경, 배경 색) 그리고 선택 인자(검사 수준, 글자 크기, 글자 두께) 전달 확인
2. 글자 크기 유효성 검사 후 `$font-size` 값 할당
3. 검사 수준, 글자 크기, 글자 두께 값을 전달해 `$ratio` 비율 값 할당
4. 전달받은 전경, 배경색 대비 검사 값을 `$original-contrast` 값 할당
5. 원본 대비 값이 비율 값보다 크거나 같을 경우, 전달 받은 전경색 그대로 반환
6. 원본 대비 값이 비율 값보다 작을 경우 전경, 배경색의 밝기 체크 후 개별 변수에 할당
7. 밝기 모드 비교 후, 조건에 따라 `$step` 값 할당
8. 전경, 배경색의 명도 대비 값이 비율보다 작을 경우 반복해서 전경색 값 조정
9. 조정된 전경색 반환

## 참고 <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)
* [@while](https://sass-lang.com/documentation/at-rules/control/while)

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

* validate-font-size()
* get-ratio()
* scale-color()
* [color-contrast()](/scss-mixins/utilities/colors/color-contrast.md)
* [light-or-dark()](/scss-mixins/utilities/colors/light-or-dark.md)