Added font color assessment

EngineQuailConfig.js

@@ -17,6 +17,7 @@ define( function() {
 			'aMustNotHaveJavascriptHref',
 			'aSuspiciousLinkText',
 			'blockquoteNotUsedForIndentation',
+			'colorFontContrast',
 			'documentVisualListsAreMarkedUp',
 			'headerH1',
 			'headerH2',

tests/manual/a11ychecker.md

@@ -1,6 +1,6 @@
 @bender-include: %TEST_DIR%../_assets/jquery.min.js
 @bender-ui: collapsed
-@bender-ckeditor-plugins: a11ychecker,sourcearea,toolbar,undo,wysiwygarea,clipboard,basicstyles,list,link,format,image,table,floatingspace
+@bender-ckeditor-plugins: a11ychecker,sourcearea,toolbar,undo,wysiwygarea,clipboard,basicstyles,list,link,format,image,table,floatingspace,colorbutton,colordialog
 
 Play around with Accessiblity Checker.
 

tests/manual/assessments/colorFontContrast.html

@@ -0,0 +1,34 @@
+<style>
+	/* Style the body this way due to a known issue with Balloon Panel in Bender */
+
+	body {
+		margin-left: 0px;
+		padding-left: 320px;
+	}
+
+</style>
+<textarea id="editor1" cols="10" rows="10">
+	&lt;h1&gt;Font contrast&lt;/h1&gt;&#10;&#9;&lt;p&gt;The following text (white text on a white background) should fail:&#10;&#9;&#9;&lt;span style=&quot;color:#ffffff&quot;&gt;&#10;&#9;&#9;&#9;&lt;span style=&quot;background-color:#ffffff&quot;&gt;foobar&lt;/span&gt;&#10;&#9;&#9;&lt;/span&gt;&#10;&#9;&lt;/p&gt;&#10;&#9;&lt;p&gt;The following text should also fail:&#10;&#9;&#9;&lt;span style=&quot;color:#9b59b6&quot;&gt;&#10;&#9;&#9;&#9;&lt;span style=&quot;background-color:#8e44ad&quot;&gt;foobar&lt;/span&gt;&#10;&#9;&#9;&lt;/span&gt;&#10;&#9;&lt;/p&gt;&#10;&#9;&lt;p&gt;&NonBreakingSpace;&lt;/p&gt;
+</textarea>
+<div contenteditable="true" id="editor2">
+	<h1>Font contrast</h1>
+	<p>The following text (white text on a white background) should fail:
+		<span style="color:#ffffff">
+			<span style="background-color:#ffffff">foobar</span>
+		</span>
+	</p>
+	<p>The following text should also fail:
+		<span style="color:#9b59b6">
+			<span style="background-color:#8e44ad">foobar</span>
+		</span>
+	</p>
+</div>
+<script>
+	CKEDITOR.replace( 'editor1', {
+		height: 500,
+		width: 900
+	} );
+
+	CKEDITOR.inline( 'editor2' );
+
+</script>

tests/manual/assessments/colorFontContrast.md

@@ -0,0 +1,16 @@
+@bender-tags: tc, 1.1.1, 237
+@bender-include: %TEST_DIR%../../_assets/jquery.min.js
+@bender-ui: collapsed
+@bender-ckeditor-plugins: a11ychecker,sourcearea,toolbar,undo,wysiwygarea,basicstyles,format,floatingspace,colorbutton,colordialog
+
+# colorFontContrast
+
+1. Focus the first editor.
+1. Click on the "Check Accessibility" button.
+
+## Expected
+
+* Accessibility Checker finds an error about font having an insufficient contrast ratio.
+* Accessibility Checker reports **2** above errors.
+
+Repeat steps for the second editor.