Edit File by line

/* global define */

[0] Fix | Delete

[1] Fix | Delete

/* eslint-disable */

[2] Fix | Delete

/**

[3] Fix | Delete

* This file contains a reusable, and dependency-free JavaScript class,

[4] Fix | Delete

* providing a contrast checker. This class allows you to assess the readability

[5] Fix | Delete

* of the given background and text colors against the WCAG 2.0 AA standard.

[6] Fix | Delete

[7] Fix | Delete

* Example Usage:

[8] Fix | Delete

[9] Fix | Delete

* // Create an instance of the plugin with custom settings.

[10] Fix | Delete

* const contrastChecker = new WPFormsColorContrastChecker({

[11] Fix | Delete

* textColor: '#de8e8e', // Replace with your actual text color.

[12] Fix | Delete

* bgColor: '#ffffff', // Replace with your actual background color.

[13] Fix | Delete

* message: {

[14] Fix | Delete

* contrastPass: '',

[15] Fix | Delete

* contrastFail: 'Insufficient contrast. Please choose a darker text color or a lighter background color.',

[16] Fix | Delete

* },

[17] Fix | Delete

* });

[18] Fix | Delete

[19] Fix | Delete

* // Perform the contrast check.

[20] Fix | Delete

* const contrastFailed = contrastChecker.checkContrast();

[21] Fix | Delete

[22] Fix | Delete

* // Display the result or handle the error, if any.

[23] Fix | Delete

* if (contrastFailed) {

[24] Fix | Delete

* console.error(contrastFailed);

[25] Fix | Delete

* }

[26] Fix | Delete

[27] Fix | Delete

/* eslint-enable */

[28] Fix | Delete

[29] Fix | Delete

( function( root, factory ) {

[30] Fix | Delete

const pluginName = 'WPFormsColorContrastChecker';

[31] Fix | Delete

[32] Fix | Delete

if ( typeof define === 'function' && define.amd ) {

[33] Fix | Delete

define( [], factory( pluginName ) );

[34] Fix | Delete

} else if ( typeof exports === 'object' ) {

[35] Fix | Delete

module.exports = factory( pluginName );

[36] Fix | Delete

} else {

[37] Fix | Delete

root[ pluginName ] = factory( pluginName );

[38] Fix | Delete

}

[39] Fix | Delete

// eslint-disable-next-line max-lines-per-function

[40] Fix | Delete

}( this, function( pluginName ) {

[41] Fix | Delete

// eslint-disable-next-line strict

[42] Fix | Delete

'use strict';

[43] Fix | Delete

[44] Fix | Delete

/**

[45] Fix | Delete

* Plugin Error Object.

[46] Fix | Delete

[47] Fix | Delete

* @since 1.8.6

[48] Fix | Delete

[49] Fix | Delete

* @class PluginError

[50] Fix | Delete

[51] Fix | Delete

* @augments Error

[52] Fix | Delete

[53] Fix | Delete

class PluginError extends Error {

[54] Fix | Delete

/**

[55] Fix | Delete

* Constructor.

[56] Fix | Delete

[57] Fix | Delete

* @since 1.8.6

[58] Fix | Delete

[59] Fix | Delete

* @param {string} message The error message.

[60] Fix | Delete

[61] Fix | Delete

constructor( message ) {

[62] Fix | Delete

super( message );

[63] Fix | Delete

[64] Fix | Delete

this.name = pluginName;

[65] Fix | Delete

}

[66] Fix | Delete

}

[67] Fix | Delete

[68] Fix | Delete

/**

[69] Fix | Delete

* Log the error message.

[70] Fix | Delete

* This function can be replaced with a custom error logging logic.

[71] Fix | Delete

[72] Fix | Delete

* @since 1.8.6

[73] Fix | Delete

[74] Fix | Delete

* @param {string} error The error message.

[75] Fix | Delete

[76] Fix | Delete

function logError( error ) {

[77] Fix | Delete

// Custom error logging logic.

[78] Fix | Delete

// Display the error message in a specific format or send it to a logging service

[79] Fix | Delete

// eslint-disable-next-line no-console

[80] Fix | Delete

console.error( error );

[81] Fix | Delete

}

[82] Fix | Delete

[83] Fix | Delete

/**

[84] Fix | Delete

* Plugin Object.

[85] Fix | Delete

[86] Fix | Delete

* @since 1.8.6

[87] Fix | Delete

[88] Fix | Delete

* @class Plugin

[89] Fix | Delete

[90] Fix | Delete

class Plugin {

[91] Fix | Delete

// Default settings.

[92] Fix | Delete

static defaults = {

[93] Fix | Delete

textColor: '',

[94] Fix | Delete

bgColor: '',

[95] Fix | Delete

contrastThreshold: 4.5, // W3C recommended minimum contrast ratio for normal text

[96] Fix | Delete

message: {

[97] Fix | Delete

contrastPass: 'The contrast ratio between the text and background color is sufficient.',

[98] Fix | Delete

contrastFail: 'The contrast ratio between the text and background color is insufficient. Please choose a darker text color or a lighter background color.',

[99] Fix | Delete

[100] Fix | Delete

};

[101] Fix | Delete

[102] Fix | Delete

/**

[103] Fix | Delete

* Constructor.

[104] Fix | Delete

[105] Fix | Delete

* @since 1.8.6

[106] Fix | Delete

[107] Fix | Delete

* @param {Object} args The argument object.

[108] Fix | Delete

[109] Fix | Delete

constructor( args ) {

[110] Fix | Delete

// Merge the default settings with the provided settings.

[111] Fix | Delete

this.args = Object.assign( {}, Plugin.defaults, args );

[112] Fix | Delete

}

[113] Fix | Delete

[114] Fix | Delete

/**

[115] Fix | Delete

* Convert hex color code to an RGB array.

[116] Fix | Delete

[117] Fix | Delete

* @since 1.8.6

[118] Fix | Delete

[119] Fix | Delete

* @param {string} hexColor The hex color code.

[120] Fix | Delete

[121] Fix | Delete

* @return {number[]|null} The RGB array or null if the conversion failed.

[122] Fix | Delete

[123] Fix | Delete

hexToRgb( hexColor ) {

[124] Fix | Delete

const shorthandRegex = /^#?([a-f\d])([a-f\d])([a-f\d])$/i;

[125] Fix | Delete

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

[126] Fix | Delete

[127] Fix | Delete

if ( shorthandRegex.test( hexColor ) ) {

[128] Fix | Delete

return result ? [

[129] Fix | Delete

parseInt( result[ 1 ], 16 ) * 17,

[130] Fix | Delete

parseInt( result[ 2 ], 16 ) * 17,

[131] Fix | Delete

parseInt( result[ 3 ], 16 ) * 17,

[132] Fix | Delete

] : null;

[133] Fix | Delete

}

[134] Fix | Delete

[135] Fix | Delete

return result ? [

[136] Fix | Delete

parseInt( result[ 1 ], 16 ),

[137] Fix | Delete

parseInt( result[ 2 ], 16 ),

[138] Fix | Delete

parseInt( result[ 3 ], 16 ),

[139] Fix | Delete

] : null;

[140] Fix | Delete

}

[141] Fix | Delete

[142] Fix | Delete

/**

[143] Fix | Delete

* Calculate relative luminance for a color.

[144] Fix | Delete

[145] Fix | Delete

* The calculated relative luminance is a value between 0 and 1,

[146] Fix | Delete

* where 0 represents black and 1 represents white.

[147] Fix | Delete

[148] Fix | Delete

* @since 1.8.6

[149] Fix | Delete

[150] Fix | Delete

* @param {string} rgb The RGB color code.

[151] Fix | Delete

[152] Fix | Delete

* @return {number} The relative luminance.

[153] Fix | Delete

[154] Fix | Delete

calculateRelativeLuminance( rgb ) {

[155] Fix | Delete

for ( let i = 0; i < rgb.length; i++ ) {

[156] Fix | Delete

rgb[ i ] /= 255;

[157] Fix | Delete

rgb[ i ] = rgb[ i ] <= 0.03928 ? rgb[ i ] / 12.92 : Math.pow( ( rgb[ i ] + 0.055 ) / 1.055, 2.4 );

[158] Fix | Delete

}

[159] Fix | Delete

[160] Fix | Delete

// As Stated in WCAG the relative luminance of a color is defined as:

[161] Fix | Delete

// L = 0.2126 * R + 0.7152 * G + 0.0722 * B

[162] Fix | Delete

// where R, G and B are the color values normalized to the range [0, 1].

[163] Fix | Delete

// @see https://www.w3.org/WAI/GL/wiki/Relative_luminance

[164] Fix | Delete

// eslint-disable-next-line no-mixed-operators

[165] Fix | Delete

return 0.2126 * rgb[ 0 ] + 0.7152 * rgb[ 1 ] + 0.0722 * rgb[ 2 ];

[166] Fix | Delete

}

[167] Fix | Delete

[168] Fix | Delete

/**

[169] Fix | Delete

* Get the contrast ratio between two colors.

[170] Fix | Delete

[171] Fix | Delete

* @since 1.8.6

[172] Fix | Delete

[173] Fix | Delete

* @return {number|null} The contrast ratio or an error if the calculation failed.

[174] Fix | Delete

[175] Fix | Delete

getContrastRatio() {

[176] Fix | Delete

try {

[177] Fix | Delete

const rgbText = this.hexToRgb( this.args.textColor );

[178] Fix | Delete

const rgbBg = this.hexToRgb( this.args.bgColor );

[179] Fix | Delete

[180] Fix | Delete

// Check for invalid color format

[181] Fix | Delete

if ( ! rgbText || ! rgbBg ) {

[182] Fix | Delete

throw new PluginError( 'Invalid color format. Provide valid hex color codes.' );

[183] Fix | Delete

}

[184] Fix | Delete

[185] Fix | Delete

const [ l1, l2 ] = [ this.calculateRelativeLuminance( rgbText ), this.calculateRelativeLuminance( rgbBg ) ];

[186] Fix | Delete

[187] Fix | Delete

// The purpose of adding 0.05 to both the maximum and minimum relative luminance

[188] Fix | Delete

// is to ensure that even if one of the luminance values is zero (which would cause division by zero),

[189] Fix | Delete

// the result won't be infinite. This kind of adjustment is common in contrast ratio calculations

[190] Fix | Delete

// to handle extreme cases and avoid mathematical errors.

[191] Fix | Delete

return ( Math.max( l1, l2 ) + 0.05 ) / ( Math.min( l1, l2 ) + 0.05 );

[192] Fix | Delete

} catch ( error ) {

[193] Fix | Delete

logError( error.message );

[194] Fix | Delete

return null;

[195] Fix | Delete

}

[196] Fix | Delete

}

[197] Fix | Delete

[198] Fix | Delete

/**

[199] Fix | Delete

* Check the contrast and provide a warning if it's below the threshold.

[200] Fix | Delete

[201] Fix | Delete

* @since 1.8.6

[202] Fix | Delete

[203] Fix | Delete

* @return {string|null} The contrast check result or boolean false if the check failed.

[204] Fix | Delete

[205] Fix | Delete

checkContrast() {

[206] Fix | Delete

try {

[207] Fix | Delete

const contrastRatio = this.getContrastRatio();

[208] Fix | Delete

[209] Fix | Delete

// Return early if invalid color format

[210] Fix | Delete

if ( contrastRatio === null ) {

[211] Fix | Delete

throw new PluginError( 'Invalid contrast ratio. Provide valid contrast ratio between two colors.' );

[212] Fix | Delete

}

[213] Fix | Delete

[214] Fix | Delete

// Warn if the contrast is below the threshold.

[215] Fix | Delete

if ( contrastRatio < this.args.contrastThreshold ) {

[216] Fix | Delete

return this.args.message.contrastFail;

[217] Fix | Delete

}

[218] Fix | Delete

[219] Fix | Delete

return this.args.message.contrastPass;

[220] Fix | Delete

} catch ( error ) {

[221] Fix | Delete

logError( error.message );

[222] Fix | Delete

return null;

[223] Fix | Delete

}

[224] Fix | Delete

}

[225] Fix | Delete

}

[226] Fix | Delete

[227] Fix | Delete

return Plugin;

[228] Fix | Delete

} ) );

[229] Fix | Delete

[230] Fix | Delete