Wikipedia

「利用者:Waiesu/ContrastChecker.js」の版間の差分

履歴の双方向閲覧
← 古い編集新しい編集 →
削除された内容 追加された内容
Waiesu (会話 | 投稿記録)
4,015 回編集
tableの表示方法を変更
Waiesu (会話 | 投稿記録)
4,015 回編集
バージョンアップしたつもり
1行目:
//<syntaxhighlight lang=javascript>
/*
 
== コントラストチェッカー ==
 
[[User:Waiesu/ContrastChecker.js]]
; 開発者: [[User:Waiesu]]
 
; 導入方法:
: [[Special:MyPage/common.js]]またはスキンごとのjsに
: importScript('User:Waiesu/ContrastChecker.js');
: を追加してください
 
; 説明:
: （ベクタースキンの場合）ページ左部のツールバーにある「Contrast Checker」をクリックすると、ON/OFFの切り替えができます。
: ONの状態だとウィンドウ左上に情報パネルが表示されます。
:
: 「マウスオーバーモード」は目的の要素へカーソルを乗せるとリアルタイムでコントラスト比の確認ができます。
: 「インプットモード」は情報パネルのテキストボックス（またはカラーピック）を上書きすることでコントラスト比の確認ができます。
 
; クラスの説明
:; 生成
:: var hoge = new CCcolor(color) -- CCcolor // colorはString。CSSのrgb(), rgba(), #HEX, CSSカラーネームに対応。
:; プロパティ
:: hoge.RGBA -- Array // [R, G, B, A]
:: hode.sRGB -- Array // [sR, sG, sB]
:: hoge.luminance -- Number // 輝度
:: hoge.brightness -- Number // 明度（参考値）
:: CCcolor.COLOR_NAME -- Object // カラーネーム一覧
:; メソッド
:: hoge.toString(type) -- String // CSS形式の文字列。typeは"rgb"と"hex"に対応。
:: CCcolor.cRatio(color1, color2) -- Number // 2色のコントラスト比。color1, color2はそれぞれCCcolorかCCcolorを生成できる文字列。
:: CCcolor.bDiff(color1, color2) -- Number // 2色の明度差（参考値）。引数は同上。
:: CCcolor.cDiff(color1, color2) -- Number // 2色の色差（参考値）。引数は同上。
*/
 
'use strict';
 
(var CCcolor = function (color) {
if (!(this instanceof CCcolor)) throw new TypeError('Call constructor with "new": CCcolor');
var type, rgba;
if (color && color.match('rgb')) {
type = 'rgb';
} else if (color && color.charAt(0) == '#') {
type = color.length > 6 ? 'hex6' : 'hex3';
} else if (color == 'transparent') {
rgba = [0, 0, 0, 0];
} else if (color in CCcolor.COLOR_NAME) {
rgba = CCcolor.COLOR_NAME[color];
rgba[3] = 1;
} else {
throw new TypeError('The argument "' + color + '" is incorrect format.');
}
 
// For RGB, HEX
var regex, format;
if (type) {
switch (type) {
case 'rgb': regex = /\d+/g; format = '${n}'; break;
case 'hex6': regex = /[0-9A-F]{2}/gi; format = '0x${n}'; break;
case 'hex3': regex = /[0-9A-F]/gi; format = '0x${n}${n}'; break;
}
rgba = color.match(regex);
rgba[3] = Number(rgba[3] || 1);
}
 
// Common
var srgb = [], // [R, G, B]
luminance = 0,
brightness = 0;
var COEFFICIENT = {
L: [0.2126, 0.7152, 0.0722],
B: [76.245, 149.685, 29.07],
};
for (var i = 0; i < 3; i++) {
// For RGB, HEX
if (format) rgba[i] = Number(format.replace(/\$\{n\}/g, rgba[i]));
// RGBA
if (rgba[i] < 0 || 255 < rgba[i]) {
throw new Error('RGB'[i] + ' value "' + rgba[i] +'" is not in correct range (0 - 255).');
}
// sRGB
srgb[i] = rgba[i] / 255;
 
// 輝度
luminance += COEFFICIENT.L[i] * (srgb[i] <= 0.03928 ? srgb[i] / 12.92 : Math.pow(((srgb[i] + 0.055) / 1.055), 2.4));
 
// 明度（参考値）
brightness += COEFFICIENT.B[i] * srgb[i];
}
this.RGBA = rgba;
this.sRGB = srgb;
this.luminance = luminance;
this.brightness = brightness;
 
return this;
};
 
/* プロパティ */
CCcolor.COLOR_NAME = {
aliceblue: [240, 248, 255],
antiquewhite: [250, 235, 215],
aqua: [0, 255, 255],
aquamarine: [127, 255, 212],
azure: [240, 255, 255],
beige: [245, 245, 220],
bisque: [255, 228, 196],
black: [0, 0, 0],
blanchedalmond: [255, 235, 205],
blue: [0, 0, 255],
blueviolet: [138, 43, 226],
brown: [165, 42, 42],
burlywood: [222, 184, 135],
cadetblue: [95, 158, 160],
chartreuse: [127, 255, 0],
chocolate: [210, 105, 30],
coral: [255, 127, 80],
cornflowerblue: [100, 149, 237],
cornsilk: [255, 248, 220],
crimson: [220, 20, 60],
cyan: [0, 255, 255],
darkblue: [0, 0, 139],
darkcyan: [0, 139, 139],
darkgoldenrod: [184, 134, 11],
darkgray: [169, 169, 169],
darkgreen: [0, 100, 0],
darkgrey: [169, 169, 169],
darkkhaki: [189, 183, 107],
darkmagenta: [139, 0, 139],
darkolivegreen: [85, 107, 47],
darkorange: [255, 140, 0],
darkorchid: [153, 50, 204],
darkred: [139, 0, 0],
darksalmon: [233, 150, 122],
darkseagreen: [143, 188, 143],
darkslateblue: [72, 61, 139],
darkslategray: [47, 79, 79],
darkslategrey: [47, 79, 79],
darkturquoise: [0, 206, 209],
darkviolet: [148, 0, 211],
deeppink: [255, 20, 147],
deepskyblue: [0, 191, 255],
dimgray: [105, 105, 105],
dimgrey: [105, 105, 105],
dodgerblue: [30, 144, 255],
firebrick: [178, 34, 34],
floralwhite: [255, 250, 240],
forestgreen: [34, 139, 34],
fuchsia: [255, 0, 255],
gainsboro: [220, 220, 220],
ghostwhite: [248, 248, 255],
gold: [255, 215, 0],
goldenrod: [218, 165, 32],
gray: [128, 128, 128],
green: [0, 128, 0],
greenyellow: [173, 255, 47],
grey: [128, 128, 128],
honeydew: [240, 255, 240],
hotpink: [255, 105, 180],
indianred: [205, 92, 92],
indigo: [75, 0, 130],
ivory: [255, 255, 240],
khaki: [240, 230, 140],
lavender: [230, 230, 250],
lavenderblush: [255, 240, 245],
lawngreen: [124, 252, 0],
lemonchiffon: [255, 250, 205],
lightblue: [173, 216, 230],
lightcoral: [240, 128, 128],
lightcyan: [224, 255, 255],
lightgoldenrodyellow: [250, 250, 210],
lightgray: [211, 211, 211],
lightgreen: [144, 238, 144],
lightgrey: [211, 211, 211],
lightpink: [255, 182, 193],
lightsalmon: [255, 160, 122],
lightseagreen: [32, 178, 170],
lightskyblue: [135, 206, 250],
lightslategray: [119, 136, 153],
lightslategrey: [119, 136, 153],
lightsteelblue: [176, 196, 222],
lightyellow: [255, 255, 224],
lime: [0, 255, 0],
limegreen: [50, 205, 50],
linen: [250, 240, 230],
magenta: [255, 0, 255],
maroon: [128, 0, 0],
mediumaquamarine: [102, 205, 170],
mediumblue: [0, 0, 205],
mediumorchid: [186, 85, 211],
mediumpurple: [147, 112, 219],
mediumseagreen: [60, 179, 113],
mediumslateblue: [123, 104, 238],
mediumspringgreen: [0, 250, 154],
mediumturquoise: [72, 209, 204],
mediumvioletred: [199, 21, 133],
midnightblue: [25, 25, 112],
mintcream: [245, 255, 250],
mistyrose: [255, 228, 225],
moccasin: [255, 228, 181],
navajowhite: [255, 222, 173],
navy: [0, 0, 128],
oldlace: [253, 245, 230],
olive: [128, 128, 0],
olivedrab: [107, 142, 35],
orange: [255, 165, 0],
orangered: [255, 69, 0],
orchid: [218, 112, 214],
palegoldenrod: [238, 232, 170],
palegreen: [152, 251, 152],
paleturquoise: [175, 238, 238],
palevioletred: [219, 112, 147],
papayawhip: [255, 239, 213],
peachpuff: [255, 218, 185],
peru: [205, 133, 63],
pink: [255, 192, 203],
plum: [221, 160, 221],
powderblue: [176, 224, 230],
purple: [128, 0, 128],
rebeccapurple: [102, 51, 153],
red: [255, 0, 0],
rosybrown: [188, 143, 143],
royalblue: [65, 105, 225],
saddlebrown: [139, 69, 19],
salmon: [250, 128, 114],
sandybrown: [244, 164, 96],
seagreen: [46, 139, 87],
seashell: [255, 245, 238],
sienna: [160, 82, 45],
silver: [192, 192, 192],
skyblue: [135, 206, 235],
slateblue: [106, 90, 205],
slategray: [112, 128, 144],
slategrey: [112, 128, 144],
snow: [255, 250, 250],
springgreen: [0, 255, 127],
steelblue: [70, 130, 180],
tan: [210, 180, 140],
teal: [0, 128, 128],
thistle: [216, 191, 216],
tomato: [255, 99, 71],
turquoise: [64, 224, 208],
violet: [238, 130, 238],
wheat: [245, 222, 179],
white: [255, 255, 255],
whitesmoke: [245, 245, 245],
yellow: [255, 255, 0],
yellowgreen: [154, 205, 50]
};
 
/* 静的メソッド */
CCcolor.cRatio = function (c1, c2) {
if (!(c1 instanceof CCcolor)) c1 = new CCcolor(c1);
if (!(c2 instanceof CCcolor)) c2 = new CCcolor(c2);
var maxL = Math.max(c1.luminance, c2.luminance);
var minL = Math.min(c1.luminance, c2.luminance);
return (maxL + 0.05) / (minL + 0.05);
};
CCcolor.bDiff = function (c1, c2) {
if (!(c1 instanceof CCcolor)) c1 = new CCcolor(c1);
if (!(c2 instanceof CCcolor)) c2 = new CCcolor(c2);
return Math.abs(c1.brightness - c2.brightness);
};
CCcolor.cDiff = function (c1, c2) {
if (!(c1 instanceof CCcolor)) c1 = new CCcolor(c1);
if (!(c2 instanceof CCcolor)) c2 = new CCcolor(c2);
var cDiff = 0;
for (var i = 0; i < 3; i++) cDiff += Math.abs(c1.RGBA[i] - c2.RGBA[i]);
return cDiff;
};
 
/* 動的メソッド */
CCcolor.prototype = {
constructor: CCcolor,
toString: function (type) {
if (!type) type = 'hex';
switch (type) {
case 'rgb': return 'rgb(' + this.RGBA.join() + ')';
case 'hex':
var hex = '#';
for (var i = 0; i < 3; i++) hex += ('0' + Number(this.RGBA[i]).toString(16)).slice(-2);
return hex;
}
}
};
(function (mw) {
// Polyfill
if (!Element.prototype.closest) {
Element.prototype.closest = Element.prototype.matches ||
Element.prototype.mozMatchesSelector ||
Element.prototype.msMatchesSelector ||
Element.prototype.oMatchesSelector ||
Element.prototype.webkitMatchesSelector;
}
 
var display = localStorage.jawpContrastChecker || 'none';
var userskin = mw.config.get('skin');
 
// Create Table
var table = document.createElement('table');
table.id = 'ContrastCheckercc-table';
table.className = 'wikitable';
table.style.display = display;
47 ⟶ 327行目:
break;
}
 
var htmlCaption = '<caption hidden>コントラストチェッカー';
var htmlThead = '<thead><tr><th>サンプル<td><span style="font-size:150%">TEXT</span>';
57 ⟶ 338行目:
'明度差',
'色差'
];
var tdtext = [
'<input class=cc-changeable-bgcolor type=text><br><input class=cc-changeable-bgcolor type=color>',
'<input class=cc-changeable-color type=text><br><input class=cc-changeable-color type=color>',
'<span><input type=text readonly style="color:#222;width:3em;">: 1</span>',
'<input type=text readonly style="font-size:1.25em;">',
'<input type=text readonly>',
'<input type=text readonly>',
];
for (var i = 0, len = thtext.length; i < len; i++) {
htmlTbody += '<tr><th>' + thtext[i] + '<td>' + tdtext[i];
}
var htmlTfoot = '<tfoot><tr><td colspan=2 style="padding:0;"><form name=ContrastChecker class=center><label><input type=radio name=onoff checked>マウスオーバーモード</label><br><label><input type=radio name=onoff>インプットモード</label></form>';
var button_textbuttonText = ['リンクを訪問済みにする', '閉じる'];
var button_idbuttonId = ['toggleLinkVisitedcc-togglelink', 'ccClosecc-close'];
for (var b = 0; b < 2; b++) {
htmlTfoot += '<button id=' + button_idbuttonId[b] + ' class=mw-ui-button type=button style="display:block;margin:auto;padding:.25em;">' + button_textbuttonText[b] + '</button>';
}
 
table.insertAdjacentHTML('beforeend', htmlCaption + htmlThead + htmlTbody + htmlTfoot);
document.body.appendChild(table);
 
// For Inputs
var changeableBgcolor = document.getElementsByClassName('cc-changeable-bgcolor');
changeableBgcolor[0].onchange = changedBgcolor;
changeableBgcolor[1].onchange = changedBgcolor;
var changeableColor = document.getElementsByClassName('cc-changeable-color');
changeableColor[0].onchange = changedColor;
changeableColor[1].onchange = changedColor;
 
// Add Button To Toolbar
var li = document.createElement('li');
li.id = 't-contrastchecker';
77 ⟶ 376行目:
a.role = 'button';
li.appendChild(a);
 
var toolbar = document.getElementById('p-tb') || document.getElementById('p-cactions');
toolbar.getElementsByTagName('ul')[0].appendChild(li);
 
a.addEventListener('click', function(e) {
e.preventDefault();
86 ⟶ 385行目:
table.style.display = 'table';
localStorage.jawpContrastChecker = 'table';
document.body.addEventListener('mouseover', main, true);
} else {
close();
}
}, false);
 
// Style
var style = document.createElement('style');
var style = '<style>#cc-table input[type="text"]{width:90%;} #cc-table input[readonly]{border:0;background-color:inherit;color:#fff;}';
switch (userskin) {
case 'cologneblue':
style.textContent += 'a.cc-visited,a.extiw.cc-visited,a.external.cc-visited{color:#8d0749} a.new.cc-visited{color:#c20}';
break;
case 'vector':
style.textContent += 'a.cc-visited{color:#0b0080} a.extiw.cc-visited{color:#636} a.external.cc-visited{color:#636} a.new.cc-visited{color:#a55858}';
break;
case 'modern':
style.textContent += 'a.cc-visited{color:#5a3696} a.extiw.cc-visited,a.external.cc-visited{color:#36b} a.new.cc-visited{color:#a55858}';
break;
case 'monobook':
style.textContent += 'a.cc-visited{color:#5a3696} a.extiw.cc-visited,a.external.cc-visited{color:#636} a.new.cc-visited{color:#a55858}';
break;
}
style += '</style>';
document.head.appendChildinsertAdjacentHTML('beforeend', style);
 
document.getElementById('toggleLinkVisitedcc-togglelink').addEventListener('click', function(e) {
var target = e.target;
var textTo;
127 ⟶ 427行目:
target.textContent = 'リンクを' + textTo + 'にする';
}, false);
document.getElementById('ccClosecc-close').addEventListener('click', close, false);
if (display == 'table') {
document.addEventListener('mouseover', main, true);
}
})();
 
if (display == 'table') document.body.addEventListener('mouseover', main, true);
function close() {
var table = document.getElementById('ContrastChecker');
table.style.display = 'none';
localStorage.jawpContrastChecker = 'none';
document.removeEventListener('mouseover', main, true);
}
 
function rgb2hexclose(rgb) {
table.style.display = 'none';
var arr = rgb.match(/(\d+)/g);
localStorage.jawpContrastChecker = 'none';
for (var i in arr) {
document.body.removeEventListener('mouseover', main, true);
arr[i] = ('0' + Number(arr[i]).toString(16)).slice(-2);
}
return '#' + arr.join('');
}
 
function parseCssColormain(ce) {
var rgbtarget = ce.match(/(\d+)/g)target;
if (target.closest('table') == table) return;
if (rgb) {
if (document.forms.ContrastChecker.onoff[1].checked) return;
var sRGB = [];
var style = document.defaultView.getComputedStyle(target, null);
for (var k = 0, len_k = rgb.length; k < len_k; k++) {
var font = {
sRGB[k] = parseInt(rgb[k]) / 255;
size: parseInt(style.getPropertyValue('font-size')),
weight: style.getPropertyValue('font-weight')
};
 
if (isNaN(font.weight)) {
if (font.weight == 'bolder') {
font.weight = 'bold';
} else if (font.weight == 'lighter') {
font.weight = 'normal';
}
} else {
if (font.weight > 500) {
font.weight = 'bold';
} else {
font.weight = 'normal';
}
}
return sRGB;
} else if (c == 'transparent') {
return [0, 0, 0, 0];
} else {
console.error('Correct CSS color: ' + c);
return false;
}
}
 
var bgcolor = new CCcolor(style.getPropertyValue('background-color'));
function luminance(sRGB) {
var color = new CCcolor(style.getPropertyValue('color'));
var k = [0.2126, 0.7152, 0.0722];
var c = [];
var result = 0;
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);
result += k[i] * c[i];
}
return result;
}
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);
}
 
while (!bgcolor.RGBA[3]) {
function brightness(sRGB) {
if (target == document.documentElement) {
var k = [76.245, 149.685, 29.07];
bgcolor = new CCcolor('white');
var result = 0;
} else {
for (var i = 0, len = sRGB.length; i < len; i++) {
target = target.parentNode;
result += k[i] * sRGB[i];
style = document.defaultView.getComputedStyle(target, null);
}
bgcolor = new CCcolor(style.getPropertyValue('background-color'));
return result;
}
}
function bDifference(sRGB1, sRGB2) {
var ratio = CCcolor.cRatio(bgcolor, color);
return Math.abs(brightness(sRGB1) - brightness(sRGB2));
}
function cDifference(sRGB1, sRGB2) {
var result = 0;
for (var i = 0, len = sRGB1.length; i < len; i++) {
result += Math.abs(sRGB1[i] - sRGB2[i]);
}
return result * 255;
}
 
var lang = e.target.lang || document.documentElement.lang || 'ja';
function main(e) {
var size = { bold: 14, normal: 18 };
var target = e.target;
if (/ja|ko|zh/.test(lang)) size = { bold: 18, normal: 22 };
var style = document.defaultView.getComputedStyle(target, null);
var fontlevel = {[
[7, '#060', 'AAA'],
size: parseInt(style.getPropertyValue('font-size')),
[4.5, '#660', 'AA']
weight: style.getPropertyValue('font-weight')
} ];
switch if (font.size >= size[font.weight]) {
level.splice(1, 0, [4.5, '#060', 'AAA–']);
case 'normal':
level.splice(4, 0, [3, '#660', 'AA–']);
case 'lighter':
}
font.weight = 400;
breakvar rank;
for (var i = 0, len = level.length; i < len; i++) {
case 'bold':
if (ratio >= level[i][0]) {
case 'bolder':
rank = [level[i][2], level[i][1]];
font.weight = 700;
break;
}
}
if (!rank) rank = ['A', '#600'];
 
output({
bgcolor: bgcolor.toString(),
color: color.toString(),
ratio: ratio,
rank: rank[0],
rankbg: rank[1],
bdiff: CCcolor.bDiff(bgcolor, color),
cdiff: CCcolor.cDiff(bgcolor, color)
});
}
 
function changedBgcolor(e) {
var bgcolor = style.getPropertyValue('background-color');
var value = e.target.value;
var color = style.getPropertyValue('color');
var parsedColorbgcolor = parseCssColornew CCcolor(colorvalue);
changeableBgcolor[0].value = value;
var parsedBgcolor = parseCssColor(bgcolor);
changeableBgcolor[1].value = value;
while (parsedBgcolor[3] === 0) {
var color = new CCcolor(changeableColor[0].value);
if (target.tagName.toLowerCase() === 'html') {
var ratio = CCcolor.cRatio(bgcolor, color);
target = document.getElementsByTagName('body')[0];
var rank;
if (ratio < 4.5) {
rank = ['A', '#600'];
} else if (ratio < 7) {
rank = ['AA', '#660'];
} else {
targetrank = target.parentNode['AAA', '#060'];
}
output({
style = document.defaultView.getComputedStyle(target, null);
bgcolor: = stylebgcolor.getPropertyValuetoString('background-color');,
color: color.toString(),
parsedBgcolor = parseCssColor(bgcolor);
ratio: ratio,
rank: rank[0],
rankbg: rank[1],
bdiff: CCcolor.bDiff(bgcolor, color),
cdiff: CCcolor.cDiff(bgcolor, color)
});
}
function changedColor(e) {
delete parsedBgcolor[3];
var value = e.target.value;
var ratio = cRatio(parsedBgcolor, parsedColor);
var bgcolor = new CCcolor(changeableBgcolor[0].value);
var level = [
var color = new CCcolor(value);
[7, '#070', 'AAA'],
changeableColor[0].value = value;
[4.5, '#770', 'AA']
changeableColor[1].value = value;
];
var ratio = CCcolor.cRatio(bgcolor, color);
if ((font.size >= 18) || (font.size >= 14 && font.weight > 500)) {
var rank;
level.splice(1, 0, [4.5, '#070', 'AAA–']);
if (ratio < 4.5) {
level.splice(4, 0, [3, '#770', 'AA–']);
rank = ['A', '#600'];
}
} else if (ratio < 7) {
var rank;
rank = ['AA', '#660'];
for (var i = 0, len = level.length; i < len; i++) {
} else {
if (ratio >= level[i][0]) {
rank = [level[i][2]'AAA', level[i][1]'#060'];
break;
}
output({
bgcolor: bgcolor.toString(),
color: color.toString(),
ratio: ratio,
rank: rank[0],
rankbg: rank[1],
bdiff: CCcolor.bDiff(bgcolor, color),
cdiff: CCcolor.cDiff(bgcolor, color)
});
}
 
if (!rank) {
function output(result) {
rank = ['A', '#700'];
var tds = table.getElementsByTagName('td');
var inputs = table.getElementsByTagName('input');
tds[0].style.backgroundColor = result.bgcolor;
tds[0].style.color = result.color;
inputs[0].value = result.bgcolor;
inputs[1].value = result.bgcolor;
inputs[2].value = result.color;
inputs[3].value = result.color;
inputs[4].value = Math.round(result.ratio * 100) / 100;
tds[4].style.backgroundColor = result.rankbg;
inputs[5].value = result.rank;
tds[5].style.backgroundColor = result.bdiff < 125 ? '#660' : '#060';
inputs[6].value = Math.round(result.bdiff * 100) / 100;
tds[6].style.backgroundColor = result.cdiff < 500 ? '#660' : '#060';
inputs[7].value = result.cdiff;
}
})(mediaWiki);
var brightness_difference = bDifference(parsedBgcolor, parsedColor);
var color_difference = cDifference(parsedBgcolor, parsedColor);
var table = document.getElementById('ContrastChecker');
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 = rank[1];
tdlist[4].textContent = rank[0];
tdlist[5].style.color = '#fff';
tdlist[5].style.backgroundColor = (brightness_difference < 125) ? '#770' : '#070';
tdlist[5].textContent = Math.round(brightness_difference * 100) / 100;
tdlist[6].style.color = '#fff';
tdlist[6].style.backgroundColor = (color_difference < 500) ? '#770' : '#070';
tdlist[6].textContent = Math.round(color_difference);
}
 
//</syntaxhighlight>
「https://ja.wikipedia.org/wiki/利用者:Waiesu/ContrastChecker.js」から取得