Validate WCAG Color Contrast for Customizer Color Control
Switch branches/tags
Nothing to show
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
assets
README.md
customizer-validate-wcag-color-contrast.js

README.md

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/.