/** * 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; }