<!-- Header markup -->

<!-- Image to simulate markup on the site -->
<img class="Width100 Block" src="//placehold.it/1400x300" alt="" />
<div class="Padding TextCenter">
	<!-- Click me! You know you want to. -->
	<a id="HCMode" style="cursor: pointer;" class="Button">Toggle High Contrast Mode</a>

<!-- Footer markup -->
.HCMode {
	//wildcard definition simulates Windows High Contrast Mode
	* { background: black !important; color: #00FF00 !important; border-color: #00FF00 !important; }

	//Comment from here down to see how the site would look 
	//in High Contrast Mode without the additional fixes.

	//resets background-image logos and icons to text and resets width & height to auto
	.Logo, .LogoAbilityOne, .LogoNIB, .SocialIcons a, .rslides_nav.prev,  .rslides_nav.next { text-indent: 0; overflow: visible; width: auto; height: auto; }

	//keeps header from overlapping images or text
	header { position: relative; }

	//additional stylistic concerns
	.Logo { font-size: 20px; }
	.SocialIcons { 
		a { border: none; } }
//Scripts for when Windows High Contrast mode is enabled
function highContrastScripts() {
	$("body").append("<div id='ContrastTest'></div>");
	$("#ContrastTest").css("background-image", "url('data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==')");
	if ($("#ContrastTest").css("background-image") == "none") {
		HighContrastMode = true;
		$('head').append('<link rel="stylesheet" href="/Global/Styles/HighContrast.less" type="text/css" />');
	} else { HighContrastMode = false; }

// Toggle High Contrast Mode styles

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. https://code.jquery.com/jquery-1.9.1.js