An Interactive Color Picker that Ensures WCAG2.0 Compliant Color Contrast Levels

Insufficient contrast between text and the background is a common problem on the web. WCAG2.0 addresses this problem, but the definition is hard to understand for most designers. Therefore, some web designers check their designs with contrast checking tools after the design is finished. If the design does not meet the WCAG2.0 guidelines the designer will have to go back and make adjustments. To overcome this problem a color picker tool is proposed that allows designers to select WCAG2.0 compliant colors during the design process thus eliminating the need for post-design color adjustments. First, the designer selects the first color freely from all available colors. Subsequently, only colors are presented that meets the chosen contrast level. In addition to being a design tool, it also serves as a pedagogical visualization aid that can help students and designers better understand the complex relationships between colors palettes and their contrasts.