TheMing: Dynamic Color Contrast Feedback

Text Color (Foreground)
No Foreground Color Available
Background Color
Contrast Value Feedback

Contrast pass guide: AA >= 20; AAA >= 32

Instructions c.80

1. Select Element c.80

Clicking on an element will show its details in the FEEDBACK section. Non-text elements, like page sections (divs) can also be selected by clicking on the rectangular button in that section. c.80

Select page elements

2. Select Color c.80

Change the color by selecting a new color in either color TABLE. TEXT that has a contrast value attached (c.99) will update automatically and show whether it passed in the FEEDBACK section. c.80

Change color

3. Contrast Rating Displayed c.80

Contrast is evaluated based on W3 Consortium's Web Content Accessibility Guidelines (WCAG) 2.0 luminance contrast formulas, the standard for both the web and usability tools. c.80

Feedback Interface

Introduction c.80

Problem: Current Color Usability Tools are slow c.80

The academic and international community have established usability and accessibility design standards. Nevertheless, ensuring sufficient contrast between text and its background color continues to present implementation challenges. Current color contrast tools are extremely slow or not available when designers are making color decisions. Clearly, another solution is needed. c.80

Solution: Add Color Feedback to Design Tools c.80

Incorporating quantitative, color usability feedback into tools where design decisions are made has a host of benefits: c.80

  • Gives users immediate access to the usability data by which they are judged
  • Prevents mode change errors that can occur from using external tools
  • Teaches new users the importance of creating usable designs

Tools like color schemers and photo-editing software could both benefit from giving users dynamic data about whether their designs comply with usability standards. c.58