Skip to content
master
Switch branches/tags
Go to file
Code

Latest commit

 

Git stats

Files

Permalink
Failed to load latest commit information.
Type
Name
Latest commit message
Commit time
 
 
 
 

Validate WCAG Color Contrast for Customizer Color Control

The validator measures the color contrast between 2 or more color controls. It will post a warning if the contrast is less than 4.5

BTW, if the contrast >= 7, the score is a WCAG AAA. If the contrast is between 7 and 4.5 the score is a WCAG AA.

Demo

I've added this validator to my customizer demo theme.

Installing the validator

Clone this repository and include the javascript code:

/**
 * Enqueue customizer control scripts.
 */
add_action( 'customize_controls_enqueue_scripts', 'on_customize_controls_enqueue_scripts' );

function on_customize_controls_enqueue_scripts() {
	$handle = 'wcag-validate-customizer-color-contrast';
	$src    = get_stylesheet_directory_uri() . '/js/customizer-validate-wcag-color-contrast.js';
	$deps   = [ 'customize-controls' ];
	wp_enqueue_script( $handle, $src, $deps );

	$exports = [
		'validate_color_contrast' => [
			// key = current color control , values = array with color controls to check color contrast against
			'page_background_color' => [ 'main_text_color', 'secondary_text_color' ],
			'main_text_color'       => [ 'page_background_color' ],
			'secondary_text_color'  => [ 'page_background_color' ],
		],
	];
	wp_scripts()->add_data( $handle, 'data', sprintf( 'var _validateWCAGColorContrastExports = %s;', wp_json_encode( $exports ) ) );
}

Note: You have to add color control setting ids to the validate_color_contrast above. See inline comment.

Credits

Copyright and License

The Validate WCAG Color Contrast for Customizer Color Control is copyright 2017 Per Soderlind

The Validate WCAG Color Contrast for Customizer Color Control is free software: you can redistribute it and/or modify it under the terms of the GNU General Public License as published by the Free Software Foundation, either version 2 of the License, or (at your option) any later version.

The Validate WCAG Color Contrast for Customizer Color Control is distributed in the hope that it will be useful, but WITHOUT ANY WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the GNU General Public License for more details.

You should have received a copy of the GNU Lesser General Public License along with the Extension. If not, see http://www.gnu.org/licenses/.

About

Validate WCAG Color Contrast for the WordPress Customizer Color Control

Topics

Resources

Releases

No releases published

Packages

No packages published