Merge pull request #374 from alphagov/sass-warn

Add colour contrast test

.gitignore

@@ -1,5 +1,5 @@
 node_modules/
 .sass-cache
 npm-debug.log
-spec/stylesheets
+spec/stylesheets/test*
 _SpecRunner.html

Gruntfile.js

@@ -16,6 +16,8 @@ module.exports = function (grunt) {
     }
   )
 
+  allSassFiles.push("@import '_colour_contrast_spec.scss';")
+
   grunt.file.write(
     './spec/stylesheets/test.scss',
     allSassFiles.join('\n')
@@ -46,7 +48,9 @@ module.exports = function (grunt) {
         },
         options: {
           loadPath: [
-            './stylesheets'
+            './node_modules',
+            './stylesheets',
+            './spec/stylesheets'
           ],
           style: 'nested'
         }

package.json

@@ -9,7 +9,8 @@
     "grunt-contrib-jasmine": "^1.0.0",
     "grunt-contrib-sass": "0.7.4",
     "jquery": "~1.12.4",
-    "standard": "^8.2.0"
+    "standard": "^8.2.0",
+    "sass-color-helpers": "^2.0.3"
   },
   "scripts": {
     "test": "grunt test && npm run lint --silent",

spec/stylesheets/_colour_contrast_spec.scss

@@ -0,0 +1,12 @@
+@import "colours/organisation";
+@import "sass-color-helpers/stylesheets/color-helpers/math";
+@import "sass-color-helpers/stylesheets/color-helpers/contrast";
+
+@each $organisation in $all-organisation-brand-colours {
+  $minimum-contrast: 4.5;
+  $contrast: ch-color-contrast($white, nth($organisation, 3));
+
+  @if ($contrast < $minimum-contrast) {
+    @error "Contrast ratio for #{nth($organisation, 1)} too low. #{nth($organisation, 3)} on #{$white} has a contrast of: #{$contrast}. Must be higher than #{$minimum-contrast} for WCAG AA support";
+  }
+}