sass-a11y 0.1.0

checksums.yaml

@@ -0,0 +1,7 @@
+---
+SHA1:
+  metadata.gz: c893d23e4d73668987613c85926c9bd3948567ea
+  data.tar.gz: d26210d167b440fa70e798ca1360197898f4b86e
+SHA512:
+  metadata.gz: 22c12a1a31e28f2e3a6b3feee406e800f08478e6c26e0ac497993222c4fe1a0e6befee6bfe22991e1c4b689a217072248754a68618e7d8731df374256388529e
+  data.tar.gz: 4244a9dbda05881e91b4c9df13b472bfb29caec8ed29bb52270c548e901e87f80d523eb2f77751d37510141f0080b198512d25cb841fa52316a3573001c68ae0

data/CHANGELOG.md

@@ -0,0 +1,4 @@
+## September 24, 2014
+
+* **New** `a11y-contrast` function
+* **New** `a11y-luminance` function

data/README.md

@@ -0,0 +1,38 @@
+# Sass A11Y
+Accessibility helpers for Sass.
+
+While working in Sass, it's useful to check to ensure your decisions are accessible ones. This Compass plugin (for the time being, until Sass gets an exponent function) will assist you in ensuring your designs are accessible as much as it can without having your whole site rendered.
+
+## Installation
+
+Add the following to your Gemfile:
+
+```ruby
+gem 'sass-a11y', '<1.0'
+```
+
+And the following to `config.rb`:
+
+```ruby
+require 'sass-a11y'
+```
+
+Finally, import the partials
+
+```scss
+@import "a11y";
+```
+
+## Functions
+
+### `a11y-contrast($color, $background)`
+
+Will determine if the color passes [W3C Contrast Minimums](http://www.w3.org/TR/UNDERSTANDING-WCAG20/visual-audio-contrast-contrast.html) when placed on the given background. Based on Lea Verou's fantastic [contrast-ratio site](http://leaverou.github.io/contrast-ratio/) so it works with transparent colors as well!
+
+Failing color combinations will throw an error, everything else will debug out the contrast minimum it passes. Failing color combinations will return `false`, passing ones will return `true`.
+
+To suppress messages, set `$A11Y--Contrast-Output-Warnings: false;`.
+
+### `a11y-luminance($color)`
+
+W3C [relative luminance](http://www.w3.org/TR/2008/REC-WCAG20-20081211/#relativeluminancedef) functionality. Luminance is the relative brightness of any point in a colorspace, normalized to 0 for darkest black and 1 for lightest white based on the sRGB colorspace. Returns a unitless number.

data/lib/sass-a11y.rb

@@ -0,0 +1,17 @@
+base_directory  = File.expand_path(File.join(File.dirname(__FILE__), '..'))
+a11y_stylesheets_path = File.join(base_directory, 'stylesheets')
+
+if (defined? Compass)
+  require 'sass-a11y'
+  Compass::Frameworks.register(
+    "sassy-math",
+    :path => base_directory
+  )
+else
+  ENV["SASS_PATH"] = [ENV["SASS_PATH"], a11y_stylesheets_path].compact.join(File::PATH_SEPARATOR)
+end
+
+module SassA11y
+  VERSION = "0.1.0"
+  DATE = "2014-09-25"
+end

data/stylesheets/_a11y.scss

@@ -0,0 +1 @@
+@import "a11y/colors";

data/stylesheets/a11y/_colors.scss

@@ -0,0 +1,2 @@
+@import "colors/luminance";
+@import "colors/contrast";

data/stylesheets/a11y/colors/_contrast--closest.scss

@@ -0,0 +1,26 @@
+//////////////////////////////
+// Closest, used for contrast in alpha
+//////////////////////////////
+@function a11y-ContrastClosest($color, $background, $alpha: 1) {
+  $fColors: (
+    'red': red($background),
+    'green': green($background),
+    'blue': blue($background)
+  );
+
+  $bColors : (
+    'red': red($color),
+    'green': green($color),
+    'blue': blue($color)
+  );
+
+  $return: ();
+
+  @each $color, $value in $fColors {
+    $val: max(0, (map-get($bColors, $color) - ($value * $alpha)) / (1 - $alpha));
+    $val: min($val, 255);
+    $return: map-merge($return, ($color: $val));
+  }
+
+  @return rgb(map-get($return, 'red'), map-get($return, 'green'), map-get($return, 'blue'));
+}

data/stylesheets/a11y/colors/_contrast--find.scss

@@ -0,0 +1,60 @@
+@import "contrast--settings";
+
+//////////////////////////////
+// Contrast Find
+//////////////////////////////
+@function a11y-ContrastFind($color, $background) {
+  $alpha: alpha($background);
+
+  @if $alpha >= 1 {
+    @if alpha($color) < 1 {
+      $color: a11y-ContrastOverlayOn($color, $background);
+    }
+
+    $l1: a11y-luminance($background) + .05;
+    $l2: a11y-luminance($color) + .05;
+
+    $ratio: $l1 / $l2;
+
+    @if ($l2 > $l1) {
+      $ratio: 1 / $ratio;
+    }
+
+    @return (
+      'ratio': $ratio,
+      'error': 0,
+      'min': $ratio,
+      'max': $ratio
+    );
+  }
+  // If we’re here, it means we have a semi-transparent background
+  // The text color may or may not be semi-transparent, but that doesn't matter
+  $onBlack: a11y-ContrastOverlayOn($background, map-get($A11Y--Contrast-Colors, 'black'));
+  $onBlack: a11y-ContrastFind($onBlack, $color);
+  $onBlack: map-get($onBlack, 'ratio');
+
+  $onWhite: a11y-ContrastOverlayOn($background, map-get($A11Y--Contrast-Colors, 'white'));
+  $onWhite: a11y-ContrastFind($onWhite, $color);
+  $onWhite: map-get($onWhite, 'ratio');
+
+  $max: max($onBlack, $onWhite);
+
+  $closest: a11y-ContrastClosest($color, $background, $alpha);
+
+  $min: a11y-ContrastOverlayOn($background, $closest);
+  $min: a11y-ContrastFind($color, $min);
+  $min-ratio: map-get($min, 'ratio');
+
+  $far: map-get($A11Y--Contrast-Colors, 'black');
+  @if $onWhite == $max {
+    $far: map-get($A11Y--Contrast-Colors, 'white');
+  }
+
+  @return (
+    'ratio': ($max + $min-ratio) / 2,
+    'error': ($max - $min-ratio) / 2,
+    'min': $min-ratio,
+    'max': $max,
+    'farthest': $far
+  );
+}

data/stylesheets/a11y/colors/_contrast--output.scss

@@ -0,0 +1,9 @@
+@import "contrast--settings";
+
+@function a11y-ContrastOutput($number) {
+  @each $level, $range in $A11Y--Contrast-Levels {
+    @if $number >= nth($range, 1) and $number < nth($range, 2) {
+      @return $level;
+    }
+  }
+}

data/stylesheets/a11y/colors/_contrast--overlay.scss

@@ -0,0 +1,38 @@
+//////////////////////////////
+// Overlay colors
+//////////////////////////////
+@function a11y-ContrastOverlayOn($foreground, $background) {
+  $overlaid: $foreground;
+
+  $alpha: alpha($foreground);
+  $bAlpha: alpha($background);
+
+  @if $alpha >= 1 {
+    @return $overlaid;
+  }
+
+  $Colors: (
+    'red': red($foreground),
+    'green': green($foreground),
+    'blue': blue($foreground)
+  );
+
+  @each $color in map-keys($Colors) {
+    $fVal: call($color, $overlaid) * $alpha;
+    $bVal: call($color, $background);
+
+    $bVal: $bVal * $bAlpha * (1 - $alpha);
+
+    $cVal: $fVal + $bVal;
+
+    $Colors: map-merge($Colors, ($color: $cVal));
+  }
+
+  // @debug alpha($color);
+
+  $cAlpha: $alpha + alpha($background) * (1 - $alpha);
+
+  $Colors: map-merge($Colors,  ('alpha': $cAlpha));
+
+  @return rgba(map-get($Colors, 'red'), map-get($Colors, 'green'), map-get($Colors, 'blue'), map-get($Colors, 'alpha'));
+}

data/stylesheets/a11y/colors/_contrast--settings.scss

@@ -0,0 +1,22 @@
+$A11Y--Contrast-Sizes: (
+  'semitransparent': 'The background is semi-transparent, so the contrast ratio cannot be precise. Depending on what’s going to be underneath, it could be any of the following:',
+  'fail': 'Fails WCAG 2.0 :-(',
+  'aa-large': 'Passes AA for large text (above 18pt or bold above 14pt)',
+  'aa': 'Passes AA level for any size text and AAA for large text (above 18pt or bold above 14pt)',
+  'aaa': 'Passes AAA level for any size text'
+);
+
+$A11Y--Contrast-Output-Warnings: true !default;
+
+$A11Y--Contrast-Levels: (
+  'fail': 0 3,
+  'aa-large': 3 4.5,
+  'aa': 4.5 7,
+  'aaa': 7 22
+);
+
+$A11Y--Contrast-Colors: (
+  'black': rgb(0, 0, 0),
+  'gray': rgb(127.5, 127.5, 127.5),
+  'white': rgb(255, 255, 255)
+);

data/stylesheets/a11y/colors/_contrast.scss

@@ -0,0 +1,67 @@
+@import "contrast--settings";
+@import "luminance";
+@import "contrast--overlay";
+@import "contrast--closest";
+@import "contrast--find";
+@import "contrast--output";
+
+@function a11y-contrast($color, $background) {
+  $semi: false;
+  $results: ();
+  $return: true;
+
+  @if $A11Y--Contrast-Output-Warnings {
+    @debug 'Accessibility results for `' + $color + '` text on `' + $background + '` background';
+  }
+
+
+
+  @if apha($background) {
+    @if $A11Y--Contrast-Output-Warnings {
+      @warn map-get($A11Y--Contrast-Sizes, 'semitransparent');
+    }
+
+    $semi: true;
+  }
+
+  $contrast: a11y-ContrastFind($color, $background);
+
+
+  $results: a11y-ContrastOutput(map-get($contrast, 'ratio'));
+  @if $semi {
+    $min-output: a11y-ContrastOutput(map-get($contrast, 'min'));
+    $max-output: a11y-ContrastOutput(map-get($contrast, 'max'));
+    $holder: ();
+
+
+    $holder: append($holder, $min-output);
+
+    @if $results != $min-output {
+      $holder: append($holder, $results);
+    }
+
+    @if $max-output != $min-output and $max-output != results {
+      $holder: append($holder, $max-output);
+    }
+
+    $results: $holder;
+  }
+
+  @each $level in $results {
+    @if $level == 'fail' {
+      @if $A11Y--Contrast-Output-Warnings {
+        @error map-get($A11Y--Contrast-Sizes, $level);
+        $return: false;
+      }
+
+    }
+    @else {
+      @if $A11Y--Contrast-Output-Warnings {
+        @debug map-get($A11Y--Contrast-Sizes, $level);
+      }
+
+    }
+  }
+
+  @return $return;
+}

data/stylesheets/a11y/colors/_luminance.scss

@@ -0,0 +1,29 @@
+//////////////////////////////
+// Luminance
+//
+// From http://www.w3.org/TR/2008/REC-WCAG20-20081211/#relativeluminancedef
+//////////////////////////////
+@function a11y-luminance($color) {
+  $colors: (
+    'red': red($color),
+    'green': green($color),
+    'blue': blue($color)
+  );
+
+  @each $name, $value in $colors {
+    $adjusted: 0;
+    $value: $value / 255;
+
+    @if $value < 0.03928 {
+      $value: $value / 12.92;
+    }
+    @else {
+      $value: ($value + .055) / 1.055;
+      $value: pow($value, 2.4);
+    }
+
+    $colors: map-merge($colors, ($name: $value));
+  }
+
+  @return (map-get($colors, 'red') * .2126) + (map-get($colors, 'green') * .7152) + (map-get($colors, 'blue') * .0722);
+}

metadata

@@ -0,0 +1,84 @@
+--- !ruby/object:Gem::Specification
+name: sass-a11y
+version: !ruby/object:Gem::Version
+  version: 0.1.0
+platform: ruby
+authors:
+- Sam Richard
+autorequire: 
+bindir: bin
+cert_chain: []
+date: 2014-09-25 00:00:00.000000000 Z
+dependencies:
+- !ruby/object:Gem::Dependency
+  name: sass
+  requirement: !ruby/object:Gem::Requirement
+    requirements:
+    - - ~>
+      - !ruby/object:Gem::Version
+        version: '3.4'
+  type: :runtime
+  prerelease: false
+  version_requirements: !ruby/object:Gem::Requirement
+    requirements:
+    - - ~>
+      - !ruby/object:Gem::Version
+        version: '3.4'
+- !ruby/object:Gem::Dependency
+  name: sassy-math
+  requirement: !ruby/object:Gem::Requirement
+    requirements:
+    - - ~>
+      - !ruby/object:Gem::Version
+        version: '1.5'
+  type: :runtime
+  prerelease: false
+  version_requirements: !ruby/object:Gem::Requirement
+    requirements:
+    - - ~>
+      - !ruby/object:Gem::Version
+        version: '1.5'
+description: Accessibility helpers for Sass
+email:
+- sam@snug.ug
+executables: []
+extensions: []
+extra_rdoc_files: []
+files:
+- README.md
+- CHANGELOG.md
+- lib/sass-a11y.rb
+- stylesheets/_a11y.scss
+- stylesheets/a11y/_colors.scss
+- stylesheets/a11y/colors/_contrast--closest.scss
+- stylesheets/a11y/colors/_contrast--find.scss
+- stylesheets/a11y/colors/_contrast--output.scss
+- stylesheets/a11y/colors/_contrast--overlay.scss
+- stylesheets/a11y/colors/_contrast--settings.scss
+- stylesheets/a11y/colors/_contrast.scss
+- stylesheets/a11y/colors/_luminance.scss
+homepage: https://github.com/Team-Sass/sass-a11y
+licenses:
+- MIT
+metadata: {}
+post_install_message: 
+rdoc_options: []
+require_paths:
+- lib
+required_ruby_version: !ruby/object:Gem::Requirement
+  requirements:
+  - - '>='
+    - !ruby/object:Gem::Version
+      version: '0'
+required_rubygems_version: !ruby/object:Gem::Requirement
+  requirements:
+  - - '>='
+    - !ruby/object:Gem::Version
+      version: 1.3.6
+requirements: []
+rubyforge_project: sass-a11y
+rubygems_version: 2.0.14
+signing_key: 
+specification_version: 4
+summary: Function to assist in accessibility while developing.
+test_files: []