임의의 배경색에 대비되는 텍스트 생성

18038 단어 webdeva11yjavascripttutorial
저는 현재 특히 제 React Redux 노하우를 개선하기 위해 새로운 애플리케이션을 개발하고 있습니다. 이 새 프로젝트에서 사용자는 일부 엔터티 배경에 원하는 색상을 할당할 수 있습니다. 그래서 대비되는 텍스트를 표시하는 솔루션을 찾아야 했습니다.

학점



이번 주말에 이 문제를 해결하려고 하다가 갑자기 Ionic Color Generator이 이미 문제를 해결했다는 사실이 기억났습니다. 나는 그들의 code(오픈 소스를 좋아해야 합니다 ❤️)를 살펴보고 구현에 대한 솔루션을 기반으로 했습니다.

16진수를 RGB 색상으로 변환하는 함수도 구현해야 했습니다. 이를 위해 Stackoverflow에서 제공하는 xameeramir에서 깨끗한 정규식을 찾았습니다.

대조되는 텍스트 생성



대조되는 텍스트를 생성하기 위해 world wide web consortium (W3C)에서 정의한 다음 공식을 사용하여 전경색과 배경색 조합이 색상 결함이 있는 사람이 보거나 흑백 화면에서 볼 때 충분한 대비를 제공하도록 합니다.

((Red value X 299) + (Green value X 587) + (Blue value X 114)) / 1000

위의 알고리즘은 RGB 공식에서 변환된 YIQ 색 구성표를 입력으로 사용하고 색에 대해 인지된 밝기를 출력합니다.

16진수 색상으로 작업하고 있기 때문에 밝기를 계산하기 전에 구현에 두 번의 변환이 필요합니다. 먼저 입력을 RGB로 변환한 다음 YIQ 색상으로 변환해야 합니다.

마지막으로, 임계값의 도움으로 대비가 어둡거나 밝아야 하는지를 결정하고 결과적으로 대비되는 텍스트 "색상"(검은색 또는 흰색)을 제공할 수 있습니다.

interface RGB {
    b: number;
    g: number;
    r: number;
}

function rgbToYIQ({ r, g, b }: RGB): number {
    return ((r * 299) + (g * 587) + (b * 114)) / 1000;
}

function hexToRgb(hex: string): RGB | undefined {
    if (!hex || hex === undefined || hex === '') {
        return undefined;
    }

    const result: RegExpExecArray | null =
          /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);

    return result ? {
        r: parseInt(result[1], 16),
        g: parseInt(result[2], 16),
        b: parseInt(result[3], 16)
    } : undefined;
}

export function contrast(colorHex: string | undefined,
                         threshold: number = 128): string {
    if (colorHex === undefined) {
        return '#000';
    }

    const rgb: RGB | undefined = hexToRgb(colorHex);

    if (rgb === undefined) {
        return '#000';
    }

    return rgbToYIQ(rgb) >= threshold ? '#000' : '#fff';
}

바닐라 자바스크립트 데모



Vanilla Javascript에서 위의 솔루션을 사용해 봅시다.



선택한 색상에 대해 자동으로 생성된 대조 텍스트
html 페이지에서 색상 선택기를 추가하여 동적 값을 선택합니다. 이를 위해 프레젠테이션용 웹 오픈 소스 편집기인 DeckDeckGo용으로 개발한 구성 요소를 사용합니다. Unpkg에서 구성 요소를 로드하므로 로컬에 종속성을 설치할 필요가 없습니다.

<!DOCTYPE html>
<html dir="ltr" lang="en">
<head>
  <meta charset="utf-8">
  <title>Contrast color</title>
  <script type="module" src="https://unpkg.com/@deckdeckgo/color@latest/dist/deckdeckgo-color/deckdeckgo-color.esm.js"></script>
  <script nomodule=""
src="https://unpkg.com/@deckdeckgo/color@latest/dist/deckdeckgo-color/deckdeckgo-color.js"></script>
</head>

<body style="background: #F78DA7;">
  <h1 style="font-size: 40px;">Hello World</h1>

  <deckgo-color></deckgo-color>

  <!-- Here we will add the contrast function -->

  <!-- Here we will bind the event and modify the colors -->

</body>

그런 다음 위의 함수를 추가하여 대조되는 텍스트를 생성합니다. Typescript 부분만 제거하고 Javascript 코드만 구문 분석합니다.

<script>
  function rgbToYIQ({r, g, b}) {
    return ((r * 299) + (g * 587) + (b * 114)) / 1000;
  }

  function hexToRgb(hex) {
    if (!hex || hex === undefined || hex === '') {
      return undefined;
    }

    const result =
          /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);

    return result ? {
      r: parseInt(result[1], 16),
      g: parseInt(result[2], 16),
      b: parseInt(result[3], 16)
    } : undefined;
  }
  function contrast(colorHex, threshold = 128) {
    if (colorHex === undefined) {
      return '#000';
    }

    const rgb = hexToRgb(colorHex);

    if (rgb === undefined) {
      return '#000';
    }

    return rgbToYIQ(rgb) >= threshold ? '#000' : '#fff';
  }
</script>

마지막으로 이벤트를 색상 선택기에 바인딩하여 선택한 색상을 수신하고 페이지 배경에 적용하고 궁극적으로 페이지 텍스트의 색상으로 설정하는 대조 값을 생성하는 데 사용합니다.

<script>
  document.querySelector('deckgo-color')
          .addEventListener('colorChange', updateColor, true);

  function updateColor($event) {
    document.querySelector('body').style.background = 
                                   $event.detail.hex;
    document.querySelector('body').style.color = 
                                   contrast($event.detail.hex);
  }
</script>

체리 온 더 케이크🍒🎂



당사@deckdeckgo/color 웹 구성 요소는 오픈 소스입니다. StencilJS 웹 구성 요소이므로 Vanilla Javascript 또는 모든 최신 프레임워크에서 사용할 수 있습니다. 또한 비교적 가볍습니다Bundlephobia. 번들에 418바이트만 추가합니다(축소 및 gzip 압축). 응용 프로그램에서 시도해보고 싶다면 해당 항목documentation을 확인하고 실행하십시오!

무한과 그 너머로, 메리 크리스마스 🎄🚀

다윗

davisco에 Unsplash님의 표지 사진
SGU 104 Little shop of flowers 클래식 DP
[개발 환경 구축] 로컬 윈도PC > Docker > Dropal [제2장: Docker에 LAMP 환경 만들기]

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
best100-homepage