Color Contrast Checker
Check the WCAG contrast ratio between two hexadecimal colors.
How to use this tool
Enter the requested information and review the result. Processing occurs in the browser.
Limitations
Results are informational and should be independently verified for important decisions.
Reviewed by: ATOMOS Tools Editorial Team. Last reviewed August 5, 2026.
What a contrast ratio represents
A contrast ratio compares the relative luminance of a foreground color and a background color. The closer the colors are in perceived brightness, the lower the ratio. Greater separation generally makes text and interface elements easier to distinguish.
Accessibility context
WCAG contrast requirements depend on the kind and size of content being evaluated. Body text, large text, icons, controls, and focus indicators can have different expectations. A passing ratio does not by itself make an interface accessible; font size, weight, spacing, hover and focus states, motion, and non-color cues also matter.
Practical workflow
Check the exact foreground and background colors used in the component, review the reported ratio, and then look at the component in its real context. If contrast is weak, adjust one color while keeping the intended hierarchy and brand character. Recheck interactive states such as hover, disabled, selected, and focus colors separately.
Do not rely on color alone
Even strong contrast does not solve every visual-accessibility problem. Important states such as errors, success messages, selected controls, and required fields should also use text, icons, patterns, or other cues so meaning is not communicated by color alone.
Explore related tools
Browse more Developer Tools.