color-contrast-checker
Version:
This is an accessibility validator based on WCAG 2.0 standard for checking the color contrast.
71 lines (53 loc) • 1.88 kB
HTML
<html>
<head>
<title>Example - Color Contrast Checker</title>
</head>
<body>
<h2>Color Contrast Checker</h2>
<p> Try changing the values in the fields below </p>
<label>Color 1</label>
<input type="text/javascript" id="color1" value="#000000" />
<br />
<label>Color 2</label>
<input type="text/javascript" id="color2" value="#FFFFFF" />
<br />
<label>Font Size</label>
<input type="text/javascript" id="fontsize" value="14" />
<br />
<hr />
<label>Level AA</label> :
<span id="result-AA"></span>
<br/>
<label>Level AAA</label> :
<span id="result-AAA"></span>
<script src="https://cdnjs.cloudflare.com/ajax/libs/require.js/2.1.19/require.js"></script>
<script type="text/javascript">
<!--
requirejs.config({
"baseUrl": "../",
"paths": {
"ColorContrastChecker": "src/color-contrast-checker",
"jquery": "https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min"
}
});
require(['jquery','ColorContrastChecker'], function ($, ColorContrastChecker) {
var ccc = new ColorContrastChecker();
$('#color1, #color2, #fontsize').on('change', function() {
updateResult(ccc);
});
updateResult(ccc);
});
function updateResult(ccc) {
var color1 = $('#color1').val();
var color2 = $('#color2').val();
var fontSize = $('#fontsize').val();
var resultAA = ccc.isLevelAA(color1, color2, fontSize) ? "Valid" : "Not Valid";
var resultAAA = ccc.isLevelAAA(color1, color2, fontSize) ? "Valid" : "Not Valid";
$('#result-AA').text(resultAA);
$('#result-AAA').text(resultAAA);
};
-->
</script>
</body>
</html>