fix(color-contrast): parse font-weight value as number (#2031) (#2040)

The computed values of `font-weight` are numeric string so that we don't need to check keywords such as `bold`. The `font-weight` values are continuous. They can be `123` or `123.4` so that we should parse them as number. https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Fonts/Variable_Fonts_Guide Co-authored-by: Takeshi Kurosawa <[email protected]>
dequelabs · Feb 12, 2020 · 72a5a82 · 72a5a82
1 parent 47266ce
commit 72a5a82
Show file tree

Hide file tree

Showing 2 changed files with 14 additions and 5 deletions.
diff --git a/lib/checks/color/color-contrast.js b/lib/checks/color/color-contrast.js
@@ -28,9 +28,8 @@ const fgColor = color.getForegroundColor(node, noScroll, bgColor);
 
 const nodeStyle = window.getComputedStyle(node);
 const fontSize = parseFloat(nodeStyle.getPropertyValue('font-size'));
-const fontWeight = nodeStyle.getPropertyValue('font-weight');
-const bold =
-	['bold', 'bolder', '600', '700', '800', '900'].indexOf(fontWeight) !== -1;
+const fontWeight = parseFloat(nodeStyle.getPropertyValue('font-weight'));
+const bold = !isNaN(fontWeight) && fontWeight >= 700;
 
 const cr = color.hasValidContrastRatio(bgColor, fgColor, fontSize, bold);
 

diff --git a/test/checks/color/color-contrast.js b/test/checks/color/color-contrast.js
@@ -44,14 +44,24 @@ describe('color-contrast', function() {
 
 	it('should return true when there is sufficient contrast because of font weight', function() {
 		var params = checkSetup(
-			'<div style="color: gray; background-color: white; font-size: 14pt; font-weight: bold" id="target">' +
-				'My text</div>'
+			'<div style="color: gray; background-color: white; font-size: 14pt; font-weight: 900" id="target">' +
+				'<span style="font-weight:lighter">My text</span></div>'
 		);
 
 		assert.isTrue(contrastEvaluate.apply(checkContext, params));
 		assert.deepEqual(checkContext._relatedNodes, []);
 	});
 
+	it('should return false when there is not sufficient contrast because of font weight', function() {
+		var params = checkSetup(
+			'<div style="color: gray; background-color: white; font-size: 14pt; font-weight: 100" id="target">' +
+				'<span style="font-weight:bolder">My text</span></div>'
+		);
+
+		assert.isFalse(contrastEvaluate.apply(checkContext, params));
+		assert.deepEqual(checkContext._relatedNodes, [params[0]]);
+	});
+
 	it('should return true when there is sufficient contrast because of font size', function() {
 		var params = checkSetup(
 			'<div style="color: gray; background-color: white; font-size: 18pt;" id="target">' +