diff --git a/lib/checks/color/color-contrast-evaluate.js b/lib/checks/color/color-contrast-evaluate.js index f350bb04c7..e10b0bc6bf 100644 --- a/lib/checks/color/color-contrast-evaluate.js +++ b/lib/checks/color/color-contrast-evaluate.js @@ -40,6 +40,19 @@ export default function colorContrastEvaluate(node, options, virtualNode) { return undefined; } + const nodeStyle = window.getComputedStyle(node); + const fontSize = parseFloat(nodeStyle.getPropertyValue('font-size')); + const fontWeight = nodeStyle.getPropertyValue('font-weight'); + const bold = parseFloat(fontWeight) >= boldValue || fontWeight === 'bold'; + + const ptSize = Math.ceil(fontSize * 72) / 96; + const isSmallFont = + (bold && ptSize < boldTextPt) || (!bold && ptSize < largeTextPt); + + const { expected, minThreshold, maxThreshold } = isSmallFont + ? contrastRatio.normal + : contrastRatio.large; + // if element or a parent has pseudo content then we need to mark // as needs review const pseudoElm = findPseudoElement(virtualNode, { @@ -47,7 +60,13 @@ export default function colorContrastEvaluate(node, options, virtualNode) { pseudoSizeThreshold }); if (pseudoElm) { - this.data({ messageKey: 'pseudoContent' }); + this.data({ + fontSize: `${((fontSize * 72) / 96).toFixed(1)}pt (${fontSize}px)`, + fontWeight: bold ? 'bold' : 'normal', + messageKey: 'pseudoContent', + expectedContrastRatio: expected + ':1' + }); + this.relatedNodes(pseudoElm.actualNode); return undefined; } @@ -61,11 +80,6 @@ export default function colorContrastEvaluate(node, options, virtualNode) { maxRatio: shadowOutlineEmMax }); - const nodeStyle = window.getComputedStyle(node); - const fontSize = parseFloat(nodeStyle.getPropertyValue('font-size')); - const fontWeight = nodeStyle.getPropertyValue('font-weight'); - const bold = parseFloat(fontWeight) >= boldValue || fontWeight === 'bold'; - let contrast = null; let contrastContributor = null; let shadowColor = null; @@ -84,13 +98,6 @@ export default function colorContrastEvaluate(node, options, virtualNode) { } } - const ptSize = Math.ceil(fontSize * 72) / 96; - const isSmallFont = - (bold && ptSize < boldTextPt) || (!bold && ptSize < largeTextPt); - - const { expected, minThreshold, maxThreshold } = isSmallFont - ? contrastRatio.normal - : contrastRatio.large; const isValid = contrast > expected; // ratio is outside range diff --git a/test/checks/color/color-contrast.js b/test/checks/color/color-contrast.js index 5fa6b3082e..c165796f57 100644 --- a/test/checks/color/color-contrast.js +++ b/test/checks/color/color-contrast.js @@ -409,7 +409,10 @@ describe('color-contrast', function() { assert.isUndefined(contrastEvaluate.apply(checkContext, params)); assert.deepEqual(checkContext._data, { - messageKey: 'pseudoContent' + fontSize: '12.0pt (16px)', + fontWeight: 'normal', + messageKey: 'pseudoContent', + expectedContrastRatio: '4.5:1' }); assert.equal( checkContext._relatedNodes[0], @@ -425,7 +428,10 @@ describe('color-contrast', function() { assert.isUndefined(contrastEvaluate.apply(checkContext, params)); assert.deepEqual(checkContext._data, { - messageKey: 'pseudoContent' + fontSize: '12.0pt (16px)', + fontWeight: 'normal', + messageKey: 'pseudoContent', + expectedContrastRatio: '4.5:1' }); assert.equal( checkContext._relatedNodes[0], @@ -449,7 +455,10 @@ describe('color-contrast', function() { assert.isUndefined(contrastEvaluate.apply(checkContext, params)); assert.deepEqual(checkContext._data, { - messageKey: 'pseudoContent' + fontSize: '12.0pt (16px)', + fontWeight: 'normal', + messageKey: 'pseudoContent', + expectedContrastRatio: '4.5:1' }); assert.equal( checkContext._relatedNodes[0], @@ -880,7 +889,7 @@ describe('color-contrast', function() { assert.equal(checkContext._data.messageKey, 'shadowOnBgColor'); }); - it('fails if thick text shadows don\'t have sufficient contrast', function() { + it("fails if thick text shadows don't have sufficient contrast", function() { var params = checkSetup( '
' + @@ -890,7 +899,7 @@ describe('color-contrast', function() { assert.isTrue(contrastEvaluate.apply(checkContext, params)); }); - it('passes if thin text shadows don\'t have sufficient contrast, but the text and background do', function() { + it("passes if thin text shadows don't have sufficient contrast, but the text and background do", function() { var params = checkSetup( '
' +