From 9bd080553141baefaa9f762bfa1ce1ad1bc0eb60 Mon Sep 17 00:00:00 2001 From: Rogan Creswick Date: Mon, 25 Nov 2013 14:38:10 -0800 Subject: incorporated large text into contrast guidelines --- guidelines/wikipedia/color.js | 61 +++++++++++++++++++---- guidelines/wikipedia/testPages/contrastTests.html | 39 +++++++++++++++ 2 files changed, 89 insertions(+), 11 deletions(-) create mode 100644 guidelines/wikipedia/testPages/contrastTests.html (limited to 'guidelines') diff --git a/guidelines/wikipedia/color.js b/guidelines/wikipedia/color.js index 2ff1f42..13c5422 100644 --- a/guidelines/wikipedia/color.js +++ b/guidelines/wikipedia/color.js @@ -2,30 +2,69 @@ 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_RATIO = 4.5; -var AAA_RATIO = 7; +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; }) - .each(function (i) { - var fg = fc.colorToRGB($(this).css('color')); - var bg = fc.findBGColor($(this)); + .each(function (i,elt) { + var fg = fc.colorToRGB($(elt).css('color')); + var bg = fc.findBGColor($(elt)); if (fg && bg) { var ratio = fc.contrast(fc.luminance(fg), fc.luminance(bg)); - - if (ratio < AA_RATIO) { + console.log("comparing witch ratio" + ratio); + if (ratio < getAARatio(elt)) { report.error('Element has poor contrast: ' + ratio + - " ratio should be greater than " + AA_RATIO, this); - } else if (ratio < AAA_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 " + AAA_RATIO, this); + " ratio should be greater than " + getAAARatio(elt), elt); } } }); - }; diff --git a/guidelines/wikipedia/testPages/contrastTests.html b/guidelines/wikipedia/testPages/contrastTests.html new file mode 100644 index 0000000..43fedf9 --- /dev/null +++ b/guidelines/wikipedia/testPages/contrastTests.html @@ -0,0 +1,39 @@ + + + + + + + +

Test page for the AA and AAA contrast guidelines

Default font size

This text is black on white.

This is low-contrast.

This is even lower contrast.

+ +

Big (14pt) font size

This text is black on white.

This is low-contrast.

This is even lower contrast.

+ +

Big (14pt) font size, Bold

This text is black on white.

This is low-contrast.

This is even lower contrast.

+ +

Large (18pt) font size

This text is black on white.

This is low-contrast.

This is even lower contrast.

+ -- cgit v1.2.3