examples/example.html

<html>
	
<head>
				
	<title>RGBlind - example</title>
		
	<link rel="stylesheet" type="text/css" href="style.css">
		
	<!-- Import RGBlind: inject SVG filters and style rules -->
	<script src="../rgblind/rgblind.js"></script>
	
</head>
	
<body>
	
	<div id="container">
		
		<h1>RGBlind example</h1>
		
		<p>
			When including <strong>rgblind.js</strong>, the Javascript code injects the required style sheet rules and SVG filters into the HTML document.
		</p>
		
		<p>
			The filters are applied by assigning classes to the DOM elements in the HTML code.
		</p>
	
		<p>
			All the below Ishihara plates are the same png-image, but with different SVG filters applied to simulate color blindness.
		</p>
	
		<div class="plate">
			<h2>Normal vision</h3>
			<img src="Ishihara_9.png" class=""/>
		</div>
		<div class="plate">
			<h2>Protanopia filter</h3>
			<!-- Apply protanopia filter to the image element -->
			<img src="Ishihara_9.png" class="protanopia"/>
		</div>
		<div class="plate">
			<h2>Deuteranopia filter</h3>
			<!-- Apply deuteranopia filter to the image element -->
			<img src="Ishihara_9.png" class="deuteranopia"/>
		</div>
		
		<br class="clear"/>
		
		<a href="https://en.wikipedia.org/wiki/Ishihara_test">Wikipedia</a> on the 74 Ishihara color test plate: Depending on the computer displays, people with normal vision should see the number "74". Many people who are color blind see it as "21", and those with total color blindness may not see any numbers.
				
	</div>
			
</body>

</html>