Color Contrast Analysis (WCAG Compliance Test)

With this tool you can easily test background and text color combinations for optimal readability and conformance to the accessibility standards proposed by the W3C Web Accessibility Initiative (WAI).

To use the tool, simply pick your background and text colors from your current palette using the swatches at the left. As soon as you change your color combination, the WCAG 1.0 and 2.0 result will be displayed below, alongside an indication of the AA or AAA compliance (AAA being the highest possible compliance level).

Background
-

Text Color
-

Quisque ipsum purus, fermentum sit amet, rhoncus a, porttitor varius, lacus. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Sed urna. Morbi nec lacus. Duis vulputate.

Text Sample

WCAG 2.0 (W3C Candidate Recommendation, 2008)
Result	Contrast ratio = -
Large text	At least 18 px, or at least 14 px bold
Small text	All text that can not be considered "large text"
WCAG 1.0 (W3C Recommendation, 1999)
Result	Brightness difference = - (Minimum 125) Color difference = - (Minimum 500)
Standards compliance

If you want to show your website compliance level, official W3C logos are available for download.

Some JavaScript code courtesy of Yahoo! YUI.

Adobe Photoshop, Adobe InDesign, and Adobe Illustrator are registered trademarks of Adobe Systems, Inc.

Color Contrast Analysis (WCAG Compliance Test)

Lorem (18 px) Ipsum (14 px, bold)

WCAG 2.0 (W3C Candidate Recommendation, 2008)

WCAG 1.0 (W3C Recommendation, 1999)