diff options
| author |  Rogan Creswick <creswick@gmail.com> | 2013-11-25 14:38:10 -0800 |
|---|---|---|
| committer | Rogan Creswick <creswick@gmail.com> | 2013-11-25 14:38:10 -0800 |
| commit | 9bd080553141baefaa9f762bfa1ce1ad1bc0eb60 (patch) | |
| tree | 2e1fe1acfbcd5a5b57ddbe2bfd4c395317cbd053 /guidelines | |
| parent | 976abddf13893f85897fe709cafebadfacea962b (diff) | |
incorporated large text into contrast guidelines
Diffstat (limited to 'guidelines')
| -rw-r--r-- | guidelines/wikipedia/color.js | 61 | ||||
| -rw-r--r-- | guidelines/wikipedia/testPages/contrastTests.html | 39 |
2 files changed, 89 insertions, 11 deletions
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 @@ +<!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> |