利用者:Waiesu/ContrastChecker.js

/* コントラストチェッカー
 * ページ上部のその他タブにある「コントラストチェック」ボタンをクリックして、ON/OFFの切り替えができます。
 * ONの状態だとウィンドウ左上に情報パネルが表示されます。
 */
'use strict';
(function() {
	var table = document.createElement('table');
	table.id = 'Contrast-checker';
	table.className = 'wikitable nowrap';
	table.style.display = 'none';
	table.style.position = 'fixed';
	table.style.top = 0;
	table.style.margin = '1em';
	table.style.padding = '0.5em';
	table.style.fontSize = '0.75em';
	table.style.width = '12.7em';
	table.style.tableLayout = 'fixed';
	var caption = document.createElement('caption');
	caption.textContent = 'コントラストチェッカー';
	caption.hidden = true;
	table.appendChild(caption);
	var tr = [], th = [], td = [];
	var thtext = ['サンプル', '背景色', '文字色', '<span style="display:inline-block;transform-origin:left center;transform:scaleX(0.77);">コントラスト比</span>', 'WCAG 2.0<br>達成基準'];
	for (var i = 0; i < 5; i++) {
		var thistr = tr[i],
			thisth = th[i],
			thistd = td[i];
		thistr = document.createElement('tr');
		thisth = document.createElement('th');
		thisth.innerHTML = thtext[i];
		thistr.appendChild(thisth);
		thistd = document.createElement('td');
		thistr.appendChild(thistd);
		table.appendChild(thistr);
	}
	table.getElementsByTagName('td')[0].innerHTML = '<span style="font-size:150%">TEXT</span>';
	document.body.appendChild(table);
	
	var li = document.createElement('li');
	var a = document.createElement('a');
	a.href = '#';
	a.textContent = 'コントラストチェック';
	li.appendChild(a);
	document.getElementById('p-cactions').getElementsByTagName('ul')[0].appendChild(li);
	a.addEventListener('click', function(){
		table.style.display = (table.style.display == 'none') ? 'table' : 'none';
	}, false);
	
	document.addEventListener('mouseover', main, true);
})();

function rgb2hex(rgb) {
	var arr = rgb.match(/(\d+)/g);
	for (var i in arr) {
		arr[i] = ('0' + Number(arr[i]).toString(16)).slice(-2);
	}
	return '#' + arr.join('');
}

function parseCssColor(c) {
	var rgb = c.match(/(\d+)/g);
	if (rgb) {
		var sRGB = [];
		for (var k = 0, len_k = rgb.length; k < len_k; k++) {
			sRGB[k] = parseInt(rgb[k]) / 255;
		}
		return sRGB;
	} else {
		console.error('Correct CSS color(s).');
		return false;
	}
}

function luminance(sRGB) {
	var k = [0.2126, 0.7152, 0.0722];
	var c = [];
	for (var i = 0, len = sRGB.length; i < len; i++) {
		var v = sRGB[i];
		c[i] = (v <= 0.03928) ? (v / 12.92) : Math.pow(((v + 0.055) / 1.055), 2.4);
	}
	return k[0] * c[0] + k[1] * c[1] + k[2] * c[2];
}
function cRatio(sRGB1, sRGB2) {
	var l = [luminance(sRGB1), luminance(sRGB2)];
	if (l[0] < l[1]) {
		l.reverse();
	}
	return (l[0] + 0.05) / (l[1] + 0.05);
}

function main(e) {
	var target = e.target;
	var style = document.defaultView.getComputedStyle(target, null);
	var font = {
		size: parseInt(style.fontSize),
		weight: style.fontWeight
	};
	switch (font.weight) {
		case 'normal':
		case 'lighter':
			font.weight = 400;
			break;
		case 'bold':
		case 'bolder':
			font.weight = 700;
	}
	
	var color = style.color;
	var inherit = ['inherit', 'rgba(0, 0, 0, 0)', 'transparent'];
	while (inherit.indexOf(style.backgroundColor) > -1) {
		target = target.parentNode;
		style = document.defaultView.getComputedStyle(target, null);
	}
	var bgcolor = style.backgroundColor;
	var ratio = cRatio(parseCssColor(bgcolor), parseCssColor(color));
	var level;
	if (font.size >= 22) {
		level = {aa: 3, aaa: 4.5};
	} else if (font.size < 14) {
		level = {aa: 4.5, aaa: 7};
	} else if (font.weight > 500) {
		level = {aa: 3, aaa: 4.5};
	} else {
		level = {aa: 4.5, aaa: 7};
	}
	var rank = '不明';
	var rankColor;
	if (ratio >= level.aaa) {
		rank = 'AAA';
		rankColor = '#070';
	} else if (ratio >= level.aa) {
		rank = 'AA';
		rankColor = '#770';
	} else {
		rank = 'A';
		rankColor = '#700';
	}
	var table = document.getElementById('Contrast-checker');
	var tdlist = table.getElementsByTagName('td');
	tdlist[0].style.backgroundColor = bgcolor;
	tdlist[0].style.color = color;
	tdlist[1].textContent = rgb2hex(bgcolor);
	tdlist[2].textContent = rgb2hex(color);
	tdlist[3].innerHTML = Math.round(ratio * 100) / 100 + '<span style="float:right">: 1</span>';
	tdlist[4].style.fontSize = '1.2em';
	tdlist[4].style.color = '#fff';
	tdlist[4].style.backgroundColor = rankColor;
	tdlist[4].textContent = rank;
}