/**
* Returns the CSS that increases contrast between the Contrast and Accent Colors is needed.
*
* These styles should be added after the styles for each individual component. The default colors
* pass the initial contrast tests here, so no modifications are made.
*
* @since Fourteen Colors 0.5
*
* @return String $css
*/
function fourteen_colors_general_css()
{
$accent_color = get_theme_mod('accent_color', '#24890d');
$contrast_color = get_theme_mod('contrast_color', '#000000');
if (fourteen_colors_contrast_ratio($accent_color, $contrast_color) > 3) {
// We're good. Accent-on-contrast is all hover states except for
// current nav item, so contrast ratio of 3:1 is acceptable.
return '';
}
// Try lightening accent color to acheive desired contrast, until hitting white.
$accent_lightened = $accent_color;
while (fourteen_colors_contrast_ratio($accent_lightened, $contrast_color) < 3 && fourteen_colors_relative_luminance($accent_lightened) < 1) {
$accent_lightened = fourteen_colors_adjust_color($accent_lightened, 8);
}
// Did we make it?
if (fourteen_colors_contrast_ratio($accent_lightened, $contrast_color) > 3) {
$accent_color = $accent_lightened;
} else {
// Try darkening accent color to acheive desired contrast, until hitting black.
$accent_darkened = $accent_color;
while (fourteen_colors_contrast_ratio($accent_darkened, $contrast_color) < 3 && fourteen_colors_relative_luminance($accent_darkened) > 0) {
$accent_darkened = fourteen_colors_adjust_color($accent_darkened, -8);
}
// Do we acheive higher contrast with the lightened or darkened color?
if (fourteen_colors_contrast_ratio($accent_lightened, $contrast_color) < fourteen_colors_contrast_ratio($accent_darkened, $contrast_color)) {
$accent_color = $accent_darkened;
} else {
$accent_color = $accent_lightened;
}
}
// Replace the accent color with the higher-contrast version against the contrast color.
$css = '
/* Higher contrast Accent Color against contrast color */
.site-navigation .current_page_item > a,
.site-navigation .current_page_ancestor > a,
.site-navigation .current-menu-item > a,
.site-navigation .current-menu-ancestor > a,
.site-navigation a:hover,
.featured-content a:hover,
.featured-content .entry-title a:hover,
.widget a:hover,
.widget-title a:hover,
.widget_twentyfourteen_ephemera .entry-meta a:hover,
.hentry .mejs-controls .mejs-button button:hover,
.site-info a:hover,
.featured-content a:hover {
color: ' . $accent_color . ';
}
.hentry .mejs-controls .mejs-time-rail .mejs-time-current,
.slider-control-paging a:hover:before,
.slider-control-paging .slider-active:before,
.slider-control-paging .slider-active:hover:before {
background-color: ' . $accent_color . ';
}
';
return $css;
}
/**
* Calculate the Web Content Accessibility Guidelines (WCAG) 2.0 contrast ratio of two colors.
*
* Text and background colors can be passed to the function in either order. The
* lighter and darker color are automatically determined by the function.
*
* @since Fourteen Colors 0.5
* @link http://www.w3.org/TR/UNDERSTANDING-WCAG20/visual-audio-contrast-contrast.html#contrast-ratiodef
*
* @param string $color1 The background or text color, in 3- or 6-digit hexadecimal form.
* @param string $color2 The text or background color, in 3- or 6-digit hexadecimal form.
* @return float $ratio The contrast ratio, as $ratio:1, which ranges from 1 to 21.
*/
function fourteen_colors_contrast_ratio($color1, $color2)
{
// Calculate relative luminance of each color.
$l1 = fourteen_colors_relative_luminance($color1);
$l2 = fourteen_colors_relative_luminance($color2);
// Determine the larger color and re-order if necessary.
if ($l1 < $l2) {
$l_ = $l1;
$l1 = $l2;
$l2 = $l_;
}
// Calculate contrast ratio.
$ratio = ($l1 + 0.05) / ($l2 + 0.05);
return $ratio;
}
