fix: Added message about expected contrast ratio (#381) (#562)

dequelabs · Dec 12, 2017 · a34c023 · a34c023
1 parent 4fe74fc
commit a34c023
Show file tree

Hide file tree

Showing 4 changed files with 16 additions and 5 deletions.
diff --git a/lib/checks/color/color-contrast.js b/lib/checks/color/color-contrast.js
@@ -36,7 +36,8 @@ var data = {
 	contrastRatio: cr ? truncatedResult : undefined,
 	fontSize: (fontSize * 72 / 96).toFixed(1) + 'pt',
 	fontWeight: bold ? 'bold' : 'normal',
-	missingData: missing
+	missingData: missing,
+	expectedContrastRatio: cr.expectedContrastRatio + ':1'
 };
 
 this.data(data);

diff --git a/lib/checks/color/color-contrast.json b/lib/checks/color/color-contrast.json
@@ -5,7 +5,7 @@
     "impact": "serious",
     "messages": {
       "pass": "Element has sufficient color contrast of {{=it.data.contrastRatio}}",
-      "fail": "Element has insufficient color contrast of {{=it.data.contrastRatio}} (foreground color: {{=it.data.fgColor}}, background color: {{=it.data.bgColor}}, font size: {{=it.data.fontSize}}, font weight: {{=it.data.fontWeight}})",
+      "fail": "Element has insufficient color contrast of {{=it.data.contrastRatio}} (foreground color: {{=it.data.fgColor}}, background color: {{=it.data.bgColor}}, font size: {{=it.data.fontSize}}, font weight: {{=it.data.fontWeight}}). Expected contrast ratio of {{=it.data.expectedContrastRatio}}",
       "incomplete": {
         "bgImage": "Element's background color could not be determined due to a background image",
         "bgGradient": "Element's background color could not be determined due to a background gradient",

diff --git a/lib/commons/color/contrast.js b/lib/commons/color/contrast.js
@@ -128,15 +128,17 @@ color.getContrast = function (bgColor, fgColor) {
  * @param  {Color}  fgcolor  Foreground color
  * @param  {number}  fontSize  Font size of text, in pixels
  * @param  {boolean}  isBold  Whether the text is bold
- * @return {{isValid: boolean, contrastRatio: number}}
+ * @return {{isValid: boolean, contrastRatio: number, expectedContrastRatio: number}}
  */
 color.hasValidContrastRatio = function (bg, fg, fontSize, isBold) {
 	var contrast = color.getContrast(bg, fg);
 	var isSmallFont = (isBold && (Math.ceil(fontSize * 72) / 96) < 14) || (!isBold && (Math.ceil(fontSize * 72) / 96) < 18);
+	var expectedContrastRatio = isSmallFont ? 4.5 : 3;
 
 	return {
-		isValid: (isSmallFont && contrast >= 4.5) || (!isSmallFont && contrast >= 3),
-		contrastRatio: contrast
+		isValid: contrast > expectedContrastRatio,
+		contrastRatio: contrast,
+		expectedContrastRatio: expectedContrastRatio
 	};
 
 };
diff --git a/test/commons/color/contrast.js b/test/commons/color/contrast.js
@@ -114,18 +114,26 @@ describe('color.Color', function () {
 
 		assert.isTrue(axe.commons.color.hasValidContrastRatio(black, white, 8, false).isValid);
 		assert.isTrue(axe.commons.color.hasValidContrastRatio(black, white, 8, false).contrastRatio > 4.5);
+		assert.isTrue(axe.commons.color.hasValidContrastRatio(black, white, 8, false).expectedContrastRatio === 4.5);
+
 		assert.isTrue(axe.commons.color.hasValidContrastRatio(white, gray, 24, false).isValid);
 		assert.isTrue(axe.commons.color.hasValidContrastRatio(white, gray, 24, false).contrastRatio > 3);
+		assert.isTrue(axe.commons.color.hasValidContrastRatio(white, gray, 24, false).expectedContrastRatio === 3);
+
 		assert.isTrue(axe.commons.color.hasValidContrastRatio(white, gray, 20, true).isValid);
 		assert.isTrue(axe.commons.color.hasValidContrastRatio(white, gray, 20, true).contrastRatio > 3);
+		assert.isTrue(axe.commons.color.hasValidContrastRatio(white, gray, 20, true).expectedContrastRatio === 3);
+
 		assert.isFalse(axe.commons.color.hasValidContrastRatio(white, gray, 8, false).isValid);
 		assert.isTrue(axe.commons.color.hasValidContrastRatio(white, gray, 8, false).contrastRatio < 4.5);
+		assert.isTrue(axe.commons.color.hasValidContrastRatio(white, gray, 8, false).expectedContrastRatio === 4.5);
 	});
 
 	it('should count 1-1 ratios as visually hidden', function () {
 		var black = new axe.commons.color.Color(0, 0, 0, 1);
 
 		assert.isFalse(axe.commons.color.hasValidContrastRatio(black, black, 16, true).isValid);
 		assert.isTrue(axe.commons.color.hasValidContrastRatio(black, black, 16, true).contrastRatio === 1);
+		assert.isTrue(axe.commons.color.hasValidContrastRatio(black, black, 16, true).expectedContrastRatio === 4.5);
 	});
 });