Juicy Studio Luminosity Colour Contrast Ratio Analyser

Overview

The luminosity colour contrast ratio analyser tests whether the contrast between a background and a foreground colour is sufficient to meet wcag2.0 requirements.

Juicy Studio’s Luminosity Colour Contrast Ratio Analyser tests whether the contrast between a background color and foreground color is sufficient to meet WCAG 2.0 requirements.

Strengths

  • Can be used in design process when figuring out color schemes to ensure background colors will work against text colors being used
  • Returns the ratio and the conformance level at which this ratio passes the WCAG 2.0 standard: Level A (Priority 1), Level AA (Priority 1 & 2), Level AAA (Priority 1, 2, & 3)
  • Shows large text and regular text examples of the foreground/background color combinations being tested
  • Provides links to the WCAG 2.0 standards and explanations used to formulate the contrast ratio rules
  • Lists exceptions to color contrast ratio rules (large text, incidental text, and text used in logos or branding)

Weakness

  • Required to enter hexadecimal code for color but not offered any aids to find hexadecimal code
  • Does not evaluate colors on a web page – only evaluates colors entered into form (See Juicy Studio Accessibility Toolbar for Firefox for a plug-in from Juicy Studio that does this kind of evaluation)
  • No key to show possible ratings and what is best possible rating
    • Unless the color contrast is obviously high, not necessarily clear how well your colors contrast; have to play around and test color combinations to figure out if your color combo just barely passes or is a really good color contrast

Step 1: Open Luminosity Colour Contrast Ratio Analyser

Procedure

Screenshot

Screen shot of Open Luminosity Colour Contrast Ratio Analyser

Step 2: Enter foreground and background colors in hexadecimal format

Procedure

  • This example shows the background color #336600 (dark green) and the foreground color #fff (white)
  • Results show the the color contrast ratio is 6.90:1, higher than the required 4.5:1; this color contrast passes at Level AA for regular text and Level AAA for large text
  • To identify hexadecimal colors, use a graphics tool like Adobe Photoshop or a Firefox plug-in like Rainbow to copy hexadecimal colors from a an image or a web page

Screenshot

Screen shot of Enter foreground and background colors in hexadecimal format

Rules Evaluated with this Technique

Rules evaluated with Juicy Studio Luminosity Colour Contrast Ratio Analyser
Test
Type
Description