most-legible-color()

특정 배경 색상 위에 검정 또는 하얀색 텍스트 사용을 결정하는 유틸리티 함수

용도

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

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

사용법

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

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

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

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

로직

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

@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. "밝은" 모드일 경우, 색 구성표에 등록된 검정색을 반환

참고

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

• @function
• @if / @else

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

• light-or-dark()