Background Color

Click a swatch color to use it as background color:

Loading ...
Text Color

Click a swatch color to use it as text color:

Loading ...

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
-

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

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.