📌
背景色の明度によってテキストカラーを白黒に変更するJavaScript
はじめに
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);
});
技術的なポイント
-
相対輝度の計算: WCAG 2.0に準拠した計算方法を採用し、アクセシビリティに配慮しています。
-
CSS変数の活用: テキストカラーにCSS変数を使用することで、テーマ変更にも対応できます。
-
パフォーマンス: 一時的なDOM要素を使用してRGB値を取得し、直後に削除することで、メモリ効率を考慮しています。
まとめ
このスクリプトを使用することで、背景色に応じて適切なテキストカラーが自動的に設定され、可読性の高いUIを実現できます。また、WCAG 2.0に準拠した計算方法を採用することで、アクセシビリティの観点からも信頼性の高い実装となっています。
Discussion