diff --git a/lib/checks/color/color-contrast.js b/lib/checks/color/color-contrast.js index 96f336cd3d..b59a49103d 100644 --- a/lib/checks/color/color-contrast.js +++ b/lib/checks/color/color-contrast.js @@ -23,6 +23,12 @@ var missing; if (bgColor === null) { missing = axe.commons.color.incompleteData.get('bgColor'); } + +let equalRatio = false; +if (truncatedResult === 1) { + equalRatio = true; + missing = axe.commons.color.incompleteData.set('bgColor', 'equalRatio'); +} // need both independently in case both are missing var data = { fgColor: fgColor ? fgColor.toHexString() : undefined, @@ -35,12 +41,12 @@ var data = { this.data(data); -if (!cr.isValid) { +if (!cr.isValid || equalRatio) { this.relatedNodes(bgNodes); } //We don't know, so we'll put it into Can't Tell -if (fgColor === null || bgColor === null) { +if (fgColor === null || bgColor === null || equalRatio) { missing = null; axe.commons.color.incompleteData.clear(); return undefined; diff --git a/lib/checks/color/color-contrast.json b/lib/checks/color/color-contrast.json index 561213c39b..09dc0acc3b 100644 --- a/lib/checks/color/color-contrast.json +++ b/lib/checks/color/color-contrast.json @@ -13,6 +13,7 @@ "bgOverlap": "Element's background color could not be determined because it is overlapped by another element", "fgAlpha" : "Element's foreground color could not be determined because of alpha transparency", "elmPartiallyObscured": "Element's background color could not be determined because it's partially obscured by another element", + "equalRatio": "Element has a 1:1 contrast ratio with the background", "default": "Unable to determine contrast ratio" } } diff --git a/lib/commons/color/incomplete-data.js b/lib/commons/color/incomplete-data.js index b12a2737c4..288f61457d 100644 --- a/lib/commons/color/incomplete-data.js +++ b/lib/commons/color/incomplete-data.js @@ -15,9 +15,10 @@ color.incompleteData = (function() { if (typeof key !== 'string') { throw new Error('Incomplete data: key must be a string'); } - if (reason){ + if (reason) { data[key] = reason; } + return data[key]; }, /** * Get incomplete data by key diff --git a/test/checks/color/color-contrast.js b/test/checks/color/color-contrast.js index 0bcb63bb29..82b9ab56e2 100644 --- a/test/checks/color/color-contrast.js +++ b/test/checks/color/color-contrast.js @@ -201,4 +201,15 @@ describe('color-contrast', function () { assert.equal(checkContext._data.missingData, 'bgOverlap'); assert.equal(checkContext._data.contrastRatio, 0); }); + + it('should return undefined if element has same color as background', function () { + fixture.innerHTML = '
' + + '
Text
'+ + '
'; + var target = fixture.querySelector('#target'); + var actual = checks['color-contrast'].evaluate.call(checkContext, target); + assert.isUndefined(actual); + assert.equal(checkContext._data.missingData, 'equalRatio'); + assert.equal(checkContext._data.contrastRatio, 1); + }); }); diff --git a/test/commons/color/contrast.js b/test/commons/color/contrast.js index 5980145538..c9c4ebf19b 100644 --- a/test/commons/color/contrast.js +++ b/test/commons/color/contrast.js @@ -114,8 +114,6 @@ 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.isFalse(axe.commons.color.hasValidContrastRatio(black, black, 16, true).isValid); - assert.isTrue(axe.commons.color.hasValidContrastRatio(black, black, 16, true).contrastRatio < 3); 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, 20, true).isValid); @@ -124,4 +122,10 @@ describe('color.Color', function () { assert.isTrue(axe.commons.color.hasValidContrastRatio(white, gray, 8, false).contrastRatio < 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); + }); }); diff --git a/test/integration/rules/color-contrast/color-contrast.html b/test/integration/rules/color-contrast/color-contrast.html index 2d8eb7ab6d..4bf4e3d40d 100644 --- a/test/integration/rules/color-contrast/color-contrast.html +++ b/test/integration/rules/color-contrast/color-contrast.html @@ -22,26 +22,8 @@
This is a fail.
This is a fail.
-
Fail.
-
Hi
-
This is a fail.
-
Hi
- - - - - - - - - - - - - +
This is a fail.
@@ -80,3 +62,24 @@
Element overlap
+
1:1 ratio with transparency
+ + + + + + + + + + + + + + + +
Hi
+ +
Hi
diff --git a/test/integration/rules/color-contrast/color-contrast.json b/test/integration/rules/color-contrast/color-contrast.json index 98245f3c4b..2b27242019 100644 --- a/test/integration/rules/color-contrast/color-contrast.json +++ b/test/integration/rules/color-contrast/color-contrast.json @@ -5,22 +5,7 @@ ["#fail1"], ["#fail2"], ["#fail3"], - ["#fail4"], - ["#fail5"], - ["#fail6"], - ["#fail7"], - ["#fail8"], - ["#fail9"], - ["#fail10"], - ["#fail11"], - ["#fail12"], - ["#fail13"], - ["#fail14"], - ["#fail15"], - ["#fail16"], - ["#fail17"], - ["#fail18"], - ["#fail19"] + ["#fail6"] ], "passes": [ ["#pass1"], @@ -29,7 +14,7 @@ ["#pass4"], ["#pass5"], ["#pass6"], - ["#pass6 > input"], + ["#pass6 > input[type=\"text\"]"], ["#pass7"], ["#pass7 > input"] ], @@ -37,6 +22,21 @@ ["#canttell1"], ["#canttell2"], ["#canttell3"], - ["#canttell4"] + ["#canttell4"], + ["#canttell5"], + ["#canttell6"], + ["#canttell7"], + ["#canttell8"], + ["#canttell9"], + ["#canttell10"], + ["#canttell11"], + ["#canttell12"], + ["#canttell13"], + ["#canttell14"], + ["#canttell15"], + ["#canttell16"], + ["#canttell17"], + ["#canttell18"], + ["#canttell19"] ] }