Accessible Color Warnings (#334)

* set color overrides for GPMDP

* verify that human-provided colors are accessible

* update contributing

apps/google-play-music-desktop-player/google-play-music-desktop-player.yml

@@ -7,6 +7,8 @@ keywords:
     - GPMDP
 category: Music
 license: MIT
+goodColorOnWhite: '#DE2811'
+goodColorOnBlack: '#FFCA16'
 repository: https://github.com/MarshallOfSound/Google-Play-Music-Desktop-Player-UNOFFICIAL-
 locales:
     - en-US

contributing.md

@@ -45,66 +45,83 @@ apps
     └── my-cool-app.yml
 ```
 
-YML file rules:
+### YML File Rules 
 
 - `name` is required.
 - `description` is required.
 - `website` is required, and must be a fully-qualified URL.
-- `category` is required and must be one of the following values:
-  * Books
-  * Business
-  * Catalogs
-  * Developer Tools
-  * Education
-  * Entertainment
-  * Finance
-  * Food & Drink
-  * Games
-  * Health & Fitness
-  * Graphics & Design
-  * Lifestyle
-  * Kids
-  * Magazines & Newspapers
-  * Medical
-  * Music
-  * Navigation
-  * News
-  * Photo & Video
-  * Productivity
-  * Reference
-  * Shopping
-  * Social Networking
-  * Sports
-  * Travel
-  * Utilities
 - `repository` is optional, but must be a fully-qualified URL if provided.
 - `keywords` is optional, but should be an array if provided.
 - `license` is optional.
-- `screenshots` are optional, but should be an array in the following format if provided:
-  ```yml
-  screenshots:
-    -
-      imageUrl: 'https://mysite.com/awesome1.png'
-      caption: 'Awesome screenshot 1'
-      imageLink: 'https://mysite.com/awesome.html'
-    -
-      imageUrl: 'https://mysite.com/awesome2.png'
-      caption: 'Awesome screenshot 2'
-      imageLink: 'https://mysite.com/awesome.html'
-  ```
-  * `imageUrl` - *required* - fully-qualified URL of screenshot image.  Allowed image types are png, jpg, and gif.
-  * `caption` - an optional caption to display with the screenshot.
-  * `imageLink` - an optional link URL to indicate the link that should be directed to when someone clicks on an image.  If this field is not specified, clicking on a screenshot will go to the application website.
 - `youtube_video_url` is optional, but must be a fully-qualified URL if provided.
-- `goodColorOnWhite` is an optional hex string. If unspecified, an 
-  [accessible color](https://github.com/zeke/make-color-accessible) will be
-  picked or derived from the provided icon file.
-- `goodColorOnBlack` is an optional hex string. If unspecified, an 
-[accessible color](https://github.com/zeke/make-color-accessible) will be
-picked or derived from the provided icon file.
 - No fields should be left blank.
 
-Icon file rules:
+### Categories
+
+`category` is required and must be one of the following values:
+
+* Books
+* Business
+* Catalogs
+* Developer Tools
+* Education
+* Entertainment
+* Finance
+* Food & Drink
+* Games
+* Health & Fitness
+* Graphics & Design
+* Lifestyle
+* Kids
+* Magazines & Newspapers
+* Medical
+* Music
+* Navigation
+* News
+* Photo & Video
+* Productivity
+* Reference
+* Shopping
+* Social Networking
+* Sports
+* Travel
+* Utilities
+
+### Screenshots
+
+Screenshots are optional, but should be an array in the following format if provided:
+
+```yml
+screenshots:
+  -
+    imageUrl: 'https://mysite.com/awesome1.png'
+    caption: 'Awesome screenshot 1'
+    imageLink: 'https://mysite.com/awesome.html'
+  -
+    imageUrl: 'https://mysite.com/awesome2.png'
+    caption: 'Awesome screenshot 2'
+    imageLink: 'https://mysite.com/awesome.html'
+```
+
+* `imageUrl` - *required* - fully-qualified URL of screenshot image.  Allowed image types are png, jpg, and gif.
+* `caption` - an optional caption to display with the screenshot.
+* `imageLink` - an optional link URL to indicate the link that should be directed to when someone clicks on an image.  If this field is not specified, clicking on a screenshot will go to the application website.
+
+### Colors
+
+- `goodColorOnWhite` is an optional hex string. 
+- `goodColorOnBlack` is an optional hex string.
+
+If unspecified, an [accessible colors](https://github.com/zeke/pick-a-good-color) 
+will be picked or derived from the provided icon file.
+
+Colors must meet the 
+[WCAG contrast guidelines](https://www.w3.org/TR/WCAG/#visual-audio-contrast).
+You can use 
+[leaverou.github.io/contrast-ratio](http://leaverou.github.io/contrast-ratio/) 
+to help pick accessible colors.
+
+### Icons
 
 - Must be a `.png`
 - Must be a square

package.json

@@ -49,6 +49,7 @@
     "inquirer": "^2.0.0",
     "is-hexcolor": "^1.0.0",
     "is-url": "^1.2.2",
+    "make-color-accessible": "^1.2.0",
     "mkdirp": "^0.5.1",
     "mocha": "^3.2.0",
     "npm-run-all": "^4.0.1",

test/human-data.js

@@ -9,6 +9,7 @@ const yaml = require('yamljs')
 const isUrl = require('is-url')
 const cleanDeep = require('clean-deep')
 const imageSize = require('image-size')
+const makeColorAccessible = require('make-color-accessible')
 const slugg = require('slugg')
 const slugs = fs.readdirSync(path.join(__dirname, '../apps'))
   .filter(filename => {
@@ -62,12 +63,31 @@ describe('human-submitted app data', () => {
           expect(!app.keywords || Array.isArray(app.keywords)).to.eq(true)
         })
 
-        it('has a category', () => {
+        it('has a valid category', () => {
           expect(app.category.length).to.be.above(0)
+          expect(app.category).to.be.oneOf(categories)
         })
 
-        it('has a valid category', () => {
-          expect(app.category).to.be.oneOf(categories)
+        describe('colors', () => {
+          it(`allows goodColorOnWhite to be set, but it must be accessible`, () => {
+            // accessible: contrast ratio of 4.5:1 or greater (white background)
+            const color = app.goodColorOnWhite
+            if (color) {
+              const accessibleColor = makeColorAccessible(color)
+              expect(color === accessibleColor).to.equal(true,
+                `${slug}: contrast ratio too low for goodColorOnWhite. Try: ${accessibleColor}`)
+            }
+          })
+
+          it(`allows goodColorOnBlack to be set, but it must be accessible`, () => {
+            // accessible: contrast ratio of 4.5:1 or greater (black background)
+            const color = app.goodColorOnBlack
+            if (color) {
+              const accessibleColor = makeColorAccessible(color, {background: 'black'})
+              expect(color === accessibleColor).to.equal(true,
+                `${slug}: contrast ratio too low for goodColorOnBlack. Try: ${accessibleColor}`)
+            }
+          })
         })
 
         it('has no empty properties', () => {