From 55cd32bfaf9ed5bc5418751369e46fa1d7f098e8 Mon Sep 17 00:00:00 2001 From: Jesse Hallett Date: Mon, 6 Jan 2014 10:50:22 -0800 Subject: Moves rule files to src/ --- guidelines/wikipedia/src/color.js | 90 +++++++++++++++++++++++++++++++++++++++ 1 file changed, 90 insertions(+) create mode 100644 guidelines/wikipedia/src/color.js (limited to 'guidelines/wikipedia/src/color.js') diff --git a/guidelines/wikipedia/src/color.js b/guidelines/wikipedia/src/color.js new file mode 100644 index 0000000..b9eb31b --- /dev/null +++ b/guidelines/wikipedia/src/color.js @@ -0,0 +1,90 @@ +exports.name = "Color use"; +exports.description = "Use colors that have sufficient contrast and avoid issues with common forms of color blindness."; + +var fc = fiveui.color; +var AA_NORMAL = 4.5; +var AA_BIG = 3; +var AAA_NORMAL = 7; +var AAA_BIG = 4.5; + + +/** + * Compute the font size in points, assuming 96dpi. + */ +var fontSizePt = function(elt) { + var px = $(elt).css('font-size'); + return parseInt(px) * 72 / 96; +}; + +var isBold = function(elt) { + return $(elt).css('font-weight') == 'bold'; +}; + +/** + * See if the text counts as "large scale" according to the W3C: + * (http://www.w3.org/TR/2008/REC-WCAG20-20081211/#larger-scaledef) + */ +var isLargeScale = function(elt) { + var size = fontSizePt(elt); + var bld = isBold(elt); + return (18 <= size || (14 <= size && bld)); +}; + +var getAARatio = function(elt) { + if (isLargeScale(elt)) { + return AA_BIG; + } + return AA_NORMAL; +}; + +var getAAARatio = function(elt) { + if (isLargeScale(elt)) { + return AAA_BIG; + } + return AAA_NORMAL; +}; + +exports.rule = function (report) { + + $5('#mw-content-text *') + // filter for lowest level elts having non-empty text + .filter(function () { + var $this = $(this); + return $this.children().length === 0 && $.trim($this.text()).length > 0; + }) + .filter(exceptions) + .each(function (i, elt) { + var fg = fc.colorToRGB($(this).css('color')); + var bg = fc.findBGColor($(this)); + if (fg && bg) { + var ratio = fc.contrast(fc.luminance(fg), fc.luminance(bg)); + if (ratio < getAARatio(elt)) { + report.error('Element has poor contrast: ' + ratio + + " ratio should be greater than " + getAARatio(elt), elt); + } else if (ratio < getAAARatio(elt)){ + report.warning('Element has poor contrast: ' + ratio + + " ratio should be greater than " + getAAARatio(elt), elt); + } + } + }); +}; + +function exceptions() { + var $elem = $(this); + return !isStandardLink($elem) && + !isNavboxLink($elem); +} + +function isStandardLink($elem) { + var standard = ['new', 'external', 'extiw']; + var $a = $elem.closest('a'); + return $a.is('a') && standard.some(function(klass) { + return $a.hasClass(klass); + }); +} + +function isNavboxLink($elem) { + var $a = $elem.closest('a'); + var $nav = $a.closest('th.navbox-group'); + return $a.length > 0 && $nav.length > 0; +} -- cgit v1.2.3