<div class='test'>
	<h1>Incremental increase or decrese of original luminosity to meet AAA</h1>
	Contrast is the difference in luminance or color that makes an object (or its representation in an image or display) distinguishable. In visual perception of the real world, contrast is determined by the difference in the color and brightness of the object and other objects within the same field of view. Because the human visual system is more sensitive to contrast than absolute luminance, we can perceive the world similarly regardless of the huge changes in illumination over the day or from place to place. The maximum contrast of an image is the contrast ratio or dynamic range.
</div>

<div class='test-2'>
	<h1>Detects dark and light</h1>
	Contrast is the difference in luminance or color that makes an object (or its representation in an image or display) distinguishable. In visual perception of the real world, contrast is determined by the difference in the color and brightness of the object and other objects within the same field of view. Because the human visual system is more sensitive to contrast than absolute luminance, we can perceive the world similarly regardless of the huge changes in illumination over the day or from place to place. The maximum contrast of an image is the contrast ratio or dynamic range.
</div>

<div class='test-3'>
	<h1>Font size dependent</h1>
	Contrast is the difference in luminance or color that makes an object (or its representation in an image or display) distinguishable. In visual perception of the real world, contrast is determined by the difference in the color and brightness of the object and other objects within the same field of view. Because the human visual system is more sensitive to contrast than absolute luminance, we can perceive the world similarly regardless of the huge changes in illumination over the day or from place to place. The maximum contrast of an image is the contrast ratio or dynamic range.
</div>

<div class='test-4'>
	<h1>Resolves correctly</h1>
	Contrast is the difference in luminance or color that makes an object (or its representation in an image or display) distinguishable. In visual perception of the real world, contrast is determined by the difference in the color and brightness of the object and other objects within the same field of view. Because the human visual system is more sensitive to contrast than absolute luminance, we can perceive the world similarly regardless of the huge changes in illumination over the day or from place to place. The maximum contrast of an image is the contrast ratio or dynamic range.
</div>

@mixin uniqueVar($namespace) {
	$target: &;
  @at-root {
    $uuid: random(9 * 9 * 9 * 9 * 9 * 9 * 9 * 9 * 9);
		$pointer: '.#{$namespace}-#{$uuid}';
		:root {
			--guid-#{$uuid}: '#{$target},#{$pointer}';
		}
  }
}

@mixin colorAuto() {
	@include uniqueVar("colorAuto");
}

.test,
.test-2,
.test-3,
.test-4 {
	margin-bottom: 5em;
	background-color: #fff;
	padding: 8em;
	font-family: -apple-system,BlinkMacSystemFont,Segoe UI,Helvetica,Arial,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol;
	font-size: .9em;
	line-height: 1.5;
	max-width: 80em;
	margin: auto;
}

.test {
	@include colorAuto();
}

.test-2 {
	@include colorAuto();
	background-color: #85144B;
}

.test-3 {
	@include colorAuto();
	background-color: #000;
	font-size: 20px;
}


.test-4 {
	@include colorAuto();
	background-color: #83a787;
	color: #83a787;
}

// Just drop this code in and your golden

// scans local stylesheets for variables
const getCssVars = (selector = ":root") => Array.from(document.styleSheets)
		.filter(
			sheet =>
				sheet.href === null || sheet.href.startsWith(window.location.origin)
		)
		.reduce(
			(acc, sheet) =>
				(acc = [
					...acc,
					...Array.from(sheet.cssRules).reduce(
						(def, rule) => ( def = rule.selectorText === selector ? [
										...def,
										...Array.from(rule.style).filter(name =>
											name.startsWith("--")
										)
									]
									: def
							),
						[]
					)
				]),
			[]
		);


;(() => {
	// Which elemenet has the varibles
	const variableScope = ":root";
	const computedRootStyle = getComputedStyle(document.querySelector(variableScope)); 
	const cssRootVars = getCssVars().filter(rule => rule);
	// get the target elemenets and assign the classes
	for (const guid of cssRootVars) {
		const REMOVE_DOT = 1;
		const [target, scopeClass] = computedRootStyle.getPropertyValue(guid)
			.split(',')
			.map(string => string.replace('"', ''));
		document.querySelector(target).classList.add(scopeClass.substring(REMOVE_DOT));
		
		const level = 'AAA';
		const targetEl = document.querySelector(scopeClass);
		const computedTargetStyle = getComputedStyle(targetEl); 
		const bgColor = computedTargetStyle.getPropertyValue('background-color');
		const isBgColorDark = tinycolor(bgColor).isDark();
		const fontSize = computedTargetStyle.getPropertyValue('font-size');
		const size = parseInt(fontSize) < 16 ? 'small' : 'large';
		let color = computedTargetStyle.getPropertyValue('color');
		const testReadability = (bgColor, color) => {
			return tinycolor.isReadable(bgColor, color , {
				level,
				size
			}) 
		}
		if ( testReadability(bgColor, color) ) {
			targetEl.style.color = color;
		} else {
			// prevent while problems
			let checks = 0;
			while (!testReadability(bgColor, color) && checks <= 20) {
				color = tinycolor(color)[isBgColorDark ? 'lighten' : 'darken'](10).toString();
				checks ++;
			}
			targetEl.style.color = color;
		}
	}
})();