color-contrast()

전경, 배경 색상 간 대비 차를 반환하는 유틸리티 함수

용도

전달 받은 전경, 배경색의 명도 대비 차를 확인하여 값을 반환 받아야 할 때 사용합니다.

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

사용법

color-contrast() 함수에 대비 차를 확인할 전경, 배경색을 전달합니다.

color-contrast($fg:color, $bg:color) → number

@debug color-contrast(#999, #fff);    // 2.85 반환
@debug color-contrast(#4a8200, #fff); // 4.68 반환

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

로직

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

@function color-contrast($fg, $bg) {
  $luminance1: luminance($fg) + 0.05;
  $luminance2: luminance($bg) + 0.05;
  $ratio: $luminance1 / $luminance2;
  
  @if $luminance2 > $luminance1 {
    $ratio: 1 / $ratio;
  }
  
  $ratio: round($ratio * 100) / 100;
  
  @return $ratio;
}

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

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

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

참고

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

• @function
• @if / @else
• round()

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

• luminance()

• color-contrast()