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); }); });