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

Abstract

Insufficient contrast between text and the background is a co mmon 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 checki ng 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 f irst color freely from all available colors. Subs equently, only colors are presented that m eets the chosen contrast level. In additi on to being a design tool, it also serves as a pedagogical visualiza tion aid that can help students and designers better understand t he complex relationships between colors palettes and their contrasts.