01 / Fast steps
- Enter the foreground (text) color as a hex value.
- Enter the background color as a hex value.
- Read the contrast ratio and WCAG pass/fail results instantly.
Color Contrast Checker
Enter a foreground and background hex color to get the WCAG contrast ratio and pass/fail result.
Updates instantly as you type
02 / Best for
- Checking whether body text is readable against its background.
- Validating a color palette against WCAG accessibility guidelines.
- Comparing a few color combinations before committing to a design.
03 / Why here
- Runs entirely in your browser, nothing is uploaded.
- Uses the official WCAG 2.x relative luminance formula.
- Checks AA and AAA thresholds for both normal and large text.
04 / Keep in mind
- Only accepts hex colors (3 or 6 digits), not named colors or rgb() values.
Tool connections
Related tools
01Favicon GeneratorTurn any image into a complete favicon set: ICO, PNG sizes, apple-touch-icon, web manifest and ready-to-paste HTML.02JSON FormatterFormat and validate JSON for debugging, APIs and config files.03SQL FormatterFormat and beautify SQL queries with proper indentation and keyword casing, right in your browser.04JSON to TypeScriptGenerate TypeScript interfaces from JSON, with nested types, optional fields and union detection.05JSON to YAMLConvert JSON into clean, readable YAML for configs, pipelines and Kubernetes manifests.06YAML to JSONConvert YAML configs and manifests into formatted JSON, with clear errors on invalid syntax.
Good to know
Questions & answers
01What contrast ratio do I need?
WCAG AA requires at least 4.5:1 for normal text and 3:1 for large text. AAA requires at least 7:1 for normal text and 4.5:1 for large text.
02Is my color data sent anywhere?
No, the contrast ratio is computed entirely in your browser.
03Is Color Contrast Checker free to use?
Yes, Color Contrast Checker is completely free, with no sign-up and no usage limits. It runs entirely in your browser, so your data never leaves your device.