Color Contrast Checker
Large heading text (24px)
Normal body text at 14-16px. Most interface copy, labels, and paragraphs fall into this category, so it has the strictest contrast requirements.
About the Color Contrast Checker
Contrast ratio measures how distinguishable text is from its background, on a scale from 1:1 (identical) to 21:1 (black on white). WCAG requires at least 4.5:1 for normal text and 3:1 for large text at level AA, and 7:1 / 4.5:1 at level AAA.
This checker computes the ratio from relative luminance exactly as defined by WCAG 2.x, shows pass/fail results for each level, and previews your colors on real text. HEX, RGB, and HSL notations are accepted.
How to check color contrast
- Enter the text color as HEX, RGB, or HSL, or use the color picker.
- Enter the background color the text sits on.
- Read the contrast ratio and the AA/AAA pass-fail results.
- Adjust the colors until every required check passes, then copy the report.
Accessibility tips
- Large text means at least 24px regular or about 18.66px bold — only then does the 3:1 threshold apply.
- Check hover, focus, disabled, and placeholder states — they often use lighter, failing shades.
- UI components and icons need at least 3:1 against adjacent colors (WCAG 1.4.11).
- Test dark mode separately; inverted palettes change every ratio.
Related guides
Learn the workflow behind this tool and what to check next.
Technical SEO checks before submitting a site
A focused checklist for making sure search engines can discover, crawl, understand, and index important pages.
How to debug API JSON responses
Format the response, confirm the HTTP status, validate the schema, and compare payload changes before changing application code.
Contrast checks before shipping a color palette
A passing ratio is the baseline, not the finish line. Review how the pair behaves in real UI states and conditions.
Test both themes
A pair that passes on a light background can fail after dark-mode inversion. Check every theme you ship.
Check interactive states
Hover, focus, disabled, and visited states often use lighter shades that silently fall below 4.5:1.
Do not rely on color alone
Pair color with icons, underlines, or text labels so information survives color-vision deficiencies.
Verify large-text assumptions
The relaxed 3:1 threshold only applies from 24px, or 18.66px bold. Confirm the rendered size, not the design token.
Privacy and usage
Built for quick checks without an account
Toolinix tools are designed for short developer tasks: paste a safe sample, inspect the result, copy what you need, and move on.
No login required
You can use the tools without creating an account, subscribing to a newsletter, or saving a workspace.
Local when possible
Formatters, generators, encoders, and text utilities generally run in your browser. Network diagnostics may need a server-assisted lookup to check public URLs, domains, or IPs.
Keep secrets out
Do not paste production passwords, private keys, access tokens, customer records, or regulated data into online tools unless your own security policy allows it.
Related tools
You may also find these tools useful.