State colors need measuring against both backgrounds
If success, warning and error colors are only checked in light mode, it is common for the same colors to sink into a dark background later. A deep green or a deep red in particular all but disappears there. This tool takes a light and a dark color for each state and reports the contrast against each background side by side.
How it is calculated
Contrast uses the W3C WCAG relative luminance formula with its 0.04045 threshold, and the 3:1 verdict is the non-text requirement. Every figure here compares a state color with its background, never one state color with another. Which color stands for which state is convention, so the tool assigns no colors and the prefilled values are examples rather than recommendations. Written as of October 2026.
Limits
It does not build a palette or derive dark mode colors for you. The 4.5:1 text requirement and color-vision-deficiency simulation are not supported. The intent of WCAG 1.4.1, that a state must not be carried by color alone, cannot be checked by arithmetic, so review that yourself.
Frequently asked questions
It is a widespread convention rather than a standard. It varies by culture and product, and under common color-vision deficiencies green and red look alike. The tool therefore assigns no colors and only measures the ones you use against their backgrounds.
Often the same color loses a lot of contrast on a dark background. Check both values in the result table, and if neither clears the threshold, define a separate color per mode.
It should. The 3:1 figure applies to non-text elements such as icons, borders and badges. If a state color is also used for body text, check it against the higher text requirement separately.