反対色の作成: 包括的なソリューション
動的な色のテキスト要素を指定して、反対の背景色を生成することを目指します。含まれる div 内のテキストの明瞭さを保証します。このコントラストは、視覚的なアクセシビリティと読みやすさにとって非常に重要です。
これを実現するために、反対の色を、テキストの色と明確なコントラストを維持する補色として定義します。これは、元の色の RGB コンポーネントを反転することで実現できます。
実装手順:
コードと例:
次の JavaScript 関数は、アルゴリズム:
function invertColor(hex) { // Convert hex to RGB const rgb = hex.match(/[a-f\d]{2}/gi).map(x => parseInt(x, 16)); // Invert R, G, and B const inverted = rgb.map(x => 255 - x); // Convert RGB to hex const invertedHex = inverted.map(x => x.toString(16).padStart(2, '0')).join(''); // Return inverted color return "#" + invertedHex; }
使用例:
const originalColor = "#F0F0F0"; // Bright color const oppositeColor = invertColor(originalColor); // Should be "#202020" or a dark color
拡張バージョン:
拡張バージョンには「bw」オプションが組み込まれており、黒または白に反転し、より顕著なコントラストを提供するため、多くの場合好まれます。可読性。
function invertColor(hex, bw) { // Convert hex to RGB const rgb = hex.match(/[a-f\d]{2}/gi).map(x => parseInt(x, 16)); // Calculate luminosity const luminosity = rgb.reduce((a, b) => a + 0.299 * b + 0.587 * b + 0.114 * b) / 255; // Invert to black or white based on luminosity const invertedHex = luminosity > 0.5 ? "#000000" : "#FFFFFF"; // Return inverted color return invertedHex; }
この包括的なアルゴリズムを利用すると、視覚的な明瞭さを提供し、ユーザー エクスペリエンスを向上させる反対色をシームレスに生成できます。
以上が動的テキスト要素の反対の背景色を生成するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。