diff options
| -rw-r--r-- | guidelines/wikipedia/color.js | 54 | ||||
| -rw-r--r-- | guidelines/wikipedia/headingOrder.js | 4 | ||||
| -rw-r--r-- | guidelines/wikipedia/testPages/contrastTests.html | 39 |
3 files changed, 86 insertions, 11 deletions
diff --git a/guidelines/wikipedia/color.js b/guidelines/wikipedia/color.js index cc9fe75..045a8ac 100644 --- a/guidelines/wikipedia/color.js +++ b/guidelines/wikipedia/color.js @@ -2,10 +2,50 @@ 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 () { @@ -18,13 +58,13 @@ exports.rule = function (report) { var bg = fc.findBGColor($(this)); 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/headingOrder.js b/guidelines/wikipedia/headingOrder.js index 0875d4a..dfb7777 100644 --- a/guidelines/wikipedia/headingOrder.js +++ b/guidelines/wikipedia/headingOrder.js @@ -32,10 +32,6 @@ var checkHeadingOrder = function(report) { $5('#mw-content-text :header').each( function(idx, elt){ - if (elt.tagName == 'header') { - return; - } - // parse the level out of 'h1', 'h2', 'h3', etc. var level = parseInt(elt.tagName.substring(1,2)); 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 @@ +<!DOCTYPE html> +<!-- Should find: + - two warnings + - four errors + --> +<html> + <head> +<style> +.big {font-size: 14pt;} +.large {font-size: 18pt;} +.low {color: #666;} +.lowest {color: #dddddd;} +.bold {font-weight: bold;} +</style> + </head> + <body> +<h1>Test page for the AA and AAA contrast guidelines</h1> +<div id="mw-content-text"> + <h2>Default font size</h2> + <p>This text is black on white.</p> + <p class="low">This is low-contrast.</p> + <p class="lowest">This is even lower contrast.</p> + + <h2>Big (14pt) font size</h2> + <p class="big">This text is black on white.</p> + <p class="big low">This is low-contrast.</p> + <p class="big lowest">This is even lower contrast.</p> + + <h2>Big (14pt) font size, Bold</h2> + <p class="big bold">This text is black on white.</p> + <p class="big low bold">This is low-contrast.</p> + <p class="big lowest bold">This is even lower contrast.</p> + + <h2>Large (18pt) font size</h2> + <p class="large">This text is black on white.</p> + <p class="large low">This is low-contrast.</p> + <p class="large lowest">This is even lower contrast.</p> +</div> +</body></html> |