Free web design tool
Color Code Contrast Checker
Check contrast ratios and WCAG 2.2 criteria with foreground and background color codes. All calculation stays in your browser.
Contrast ratio
WCAG 2.2 results
Preview
Check readable body text, links, controls, and large text in your intended color combination.
How to check color contrast
- Enter a foreground and background HEX color.
- Review the ratio and WCAG 2.2 result.
- Use the preview to assess text and controls.
About WCAG contrast
WCAG contrast criteria help make text and interface controls easier to distinguish. Passing a ratio is one part of accessibility; keyboard access, structure, and clear labels also matter.
FAQ
Are colors sent to a server?
No. The checker processes input in the browser.
Does a pass guarantee accessibility?
No. This tool evaluates contrast ratio only.