Fix: Contrast checker: Consider fontSize large when size >= 24px inst…

…ead of >= 18px
WordPress · Aug 23, 2018 · d5021a2 · d5021a2
1 parent e959064
commit d5021a2
Show file tree

Hide file tree

Showing 4 changed files with 11 additions and 9 deletions.
diff --git a/packages/block-library/src/button/edit.js b/packages/block-library/src/button/edit.js
@@ -114,7 +114,9 @@ class ButtonEdit extends Component {
 						>
 							<ContrastChecker
 								{ ...{
-									isLargeText: true,
+									// Text is considered large if font size is greater or equal to 18pt or 24px,
+									// currently that's not the case for button.
+									isLargeText: false,
 									textColor: textColor.color,
 									backgroundColor: backgroundColor.color,
 									fallbackBackgroundColor,

diff --git a/packages/editor/src/components/contrast-checker/index.js b/packages/editor/src/components/contrast-checker/index.js
@@ -13,7 +13,7 @@ function ContrastChecker( {
 	backgroundColor,
 	fallbackBackgroundColor,
 	fallbackTextColor,
-	fontSize,
+	fontSize, // font size value in pixels
 	isLargeText,
 	textColor,
 } ) {
@@ -27,7 +27,7 @@ function ContrastChecker( {
 	if ( hasTransparency || tinycolor.isReadable(
 		tinyBackgroundColor,
 		tinyTextColor,
-		{ level: 'AA', size: ( isLargeText || ( isLargeText !== false && fontSize >= 18 ) ? 'large' : 'small' ) }
+		{ level: 'AA', size: ( isLargeText || ( isLargeText !== false && fontSize >= 24 ) ? 'large' : 'small' ) }
 	) ) {
 		return null;
 	}

diff --git a/packages/editor/src/components/contrast-checker/test/__snapshots__/index.js.snap b/packages/editor/src/components/contrast-checker/test/__snapshots__/index.js.snap
@@ -87,7 +87,7 @@ exports[`ContrastChecker should render messages when the textColor is valid, but
 exports[`ContrastChecker should take into consideration the font size passed 1`] = `
 <ContrastChecker
   backgroundColor="#C44B4B"
-  fontSize={17}
+  fontSize={23}
   textColor="#000000"
 >
   <div
@@ -141,7 +141,7 @@ exports[`ContrastChecker should take into consideration wherever text is large o
 exports[`ContrastChecker should use isLargeText to make decisions if both isLargeText and fontSize props are passed 1`] = `
 <ContrastChecker
   backgroundColor="#C44B4B"
-  fontSize={18}
+  fontSize={24}
   isLargeText={false}
   textColor="#000000"
 >

diff --git a/packages/editor/src/components/contrast-checker/test/index.js b/packages/editor/src/components/contrast-checker/test/index.js
@@ -115,7 +115,7 @@ describe( 'ContrastChecker', () => {
 			<ContrastChecker
 				backgroundColor="#C44B4B"
 				textColor="#000000"
-				fontSize={ 17 }
+				fontSize={ 23 }
 			/>
 		);
 
@@ -125,7 +125,7 @@ describe( 'ContrastChecker', () => {
 			<ContrastChecker
 				backgroundColor="#C44B4B"
 				textColor="#000000"
-				fontSize={ 18 }
+				fontSize={ 24 }
 			/>
 		);
 
@@ -137,7 +137,7 @@ describe( 'ContrastChecker', () => {
 			<ContrastChecker
 				backgroundColor="#C44B4B"
 				textColor="#000000"
-				fontSize={ 17 }
+				fontSize={ 23 }
 				isLargeText={ true }
 			/>
 		);
@@ -148,7 +148,7 @@ describe( 'ContrastChecker', () => {
 			<ContrastChecker
 				backgroundColor="#C44B4B"
 				textColor="#000000"
-				fontSize={ 18 }
+				fontSize={ 24 }
 				isLargeText={ false }
 			/>
 		);