a11y-color()

접근성을 준수한 전경, 배경 대비 자동 제안 유틸리티 함수

용도

WCAG 2.1 명도 대비 기준에 맞춰 AA(4.5:1) 또는 AAA(7:1) 레벨에 맞는 전경색을 자동으로 찾아 제안합니다.

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

사용법

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

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

.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로 컴파일 되어 출력됩니다.

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

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

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

로직

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

@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. 조정된 전경색 반환

참고

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

• @function

• @if / @else

• @while

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

• validate-font-size()

• get-ratio()

• scale-color()

• color-contrast()

• light-or-dark()