From 9e30d641761ac78b7599a7de7e5253735b5397fe Mon Sep 17 00:00:00 2001
From: Brad <bradarv90@gmail.com>
Date: Wed, 18 Oct 2017 05:28:33 -0400
Subject: [PATCH] fix: Added message about expected contrast ratio (#381)
 (#562)

---
 lib/checks/color/color-contrast.js   | 3 ++-
 lib/checks/color/color-contrast.json | 2 +-
 lib/commons/color/contrast.js        | 8 +++++---
 test/commons/color/contrast.js       | 8 ++++++++
 4 files changed, 16 insertions(+), 5 deletions(-)

diff --git a/lib/checks/color/color-contrast.js b/lib/checks/color/color-contrast.js
index 349eb8e0b1..dcd5fb7b27 100644
--- 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
index 578a0db2c4..d552736531 100644
--- 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
index 9a53be83ee..b2162c7f02 100644
--- 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
index c9c4ebf19b..89abdbc082 100644
--- a/test/commons/color/contrast.js
+++ b/test/commons/color/contrast.js
@@ -114,12 +114,19 @@ 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 () {
@@ -127,5 +134,6 @@ describe('color.Color', function () {
 
 		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);
 	});
 });