Zenn
📌

背景色の明度によってテキストカラーを白黒に変更するJavaScript

2024/11/22に公開
JavaScript
tech

はじめに

Webサイトのデザインにおいて、背景色に応じて適切なテキストカラーを設定することは重要です。この記事では、JavaScriptを使用して背景色の明度を自動判定し、最適なテキストカラー（黒または白）を設定する方法を解説します。

実装方法

1. 要素の取得

まず、テキストカラーを変更したい要素を取得します。

let arrClrYamadus = Array.prototype.slice.call(document.querySelectorAll(".c-yamadu"));

2. 明度計算関数の実装

背景色の明度を計算する関数を実装します。WCAG 2.0のガイドラインに基づいて相対輝度を計算します。

const getColorLuminance = (color) => {
  // RGBに変換
  const getRGB = (color) => {
    const temp = document.createElement('div');
    temp.style.color = color;
    document.body.appendChild(temp);
    const rgb = window.getComputedStyle(temp).color;
    document.body.removeChild(temp);
    return rgb.match(/\d+/g).map(Number);
  };

  // 相対輝度を計算
  const getLuminance = ([r, g, b]) => {
    const [rs, gs, bs] = [r, g, b].map(c => {
      c = c / 255;
      return c <= 0.03928 ? c / 12.92 : Math.pow((c + 0.055) / 1.055, 2.4);
    });
    return 0.2126 * rs + 0.7152 * gs + 0.0722 * bs;
  };

  return getLuminance(getRGB(color));
};

3. テキストカラーの設定

計算した明度に基づいて、適切なテキストカラーを設定します。

const luminance = getColorLuminance(bgColor);
element.style.color = luminance > 0.55
  ? 'var(--c-text,hsl(223, 6%, 13%))'
  : '#FFF';

4. イベントリスナーの設定

DOMの読み込み完了時とページロード時に処理を実行します。

['DOMContentLoaded', 'load'].forEach((events) => {
  window.addEventListener(events, fnYamaduXANA);
});

技術的なポイント

  1. 相対輝度の計算: WCAG 2.0に準拠した計算方法を採用し、アクセシビリティに配慮しています。

  2. CSS変数の活用: テキストカラーにCSS変数を使用することで、テーマ変更にも対応できます。

  3. パフォーマンス: 一時的なDOM要素を使用してRGB値を取得し、直後に削除することで、メモリ効率を考慮しています。

まとめ

このスクリプトを使用することで、背景色に応じて適切なテキストカラーが自動的に設定され、可読性の高いUIを実現できます。また、WCAG 2.0に準拠した計算方法を採用することで、アクセシビリティの観点からも信頼性の高い実装となっています。

Discussion