UtilityBaseDeveloper Tools
Color Contrast Checker
Check WCAG contrast ratios between text and background colors — AA and AAA.
Updated July 7, 2026
How to use the color contrast checker
- 1Pick your text color and background color, or paste exact hex values.
- 2Read the contrast ratio and the AA/AAA pass-fail grid.
- 3Check the live preview — does the body text read comfortably?
- 4Adjust either color until every level you're targeting shows PASS.
Common uses
- Verifying a website color palette meets WCAG AA before launch
- Fixing failed contrast findings from an accessibility audit
- Choosing readable text colors for slides, posters, and thumbnails
- Testing whether a brand color works for body text or only headlines
Frequently asked questions
What contrast ratio do I need?
WCAG level AA — the standard most laws and audits reference — requires 4.5:1 for normal text and 3:1 for large text (18pt+, or 14pt bold). The stricter AAA level requires 7:1 and 4.5:1. UI components like button borders and icons need at least 3:1.
What counts as 'large text'?
Text at 18pt (24px) or larger, or 14pt (about 18.7px) bold or larger. Bigger letterforms are legible at lower contrast, which is why the threshold relaxes.
My brand color fails — what are my options?
Darken the text color or lighten the background until the ratio passes; small shifts often suffice. Reserve the failing brand color for large headlines and decorative elements, and use a compliant variant for body text.
Does the ratio depend on which color is text vs background?
No — the ratio is symmetric, so swapping the two gives the same number. The swap button exists because previewing text-on-background both ways is still useful.
About this tool
The color contrast checker computes the WCAG contrast ratio between any two colors and shows instant pass/fail results for every compliance level: AA and AAA, for both normal and large text. A live preview renders real text in your chosen colors so you can sanity-check the numbers with your own eyes. Accessibility isn't optional — low-contrast text excludes users with low vision and is one of the most commonly failed audit criteria — and contrast is also just good design: text that passes AA is easier for everyone to read in sunlight, on dim screens, and at small sizes. The math follows the WCAG 2.x relative luminance formula exactly.
Like everything on UtilityBase, the color contrast checker runs entirely in your browser — nothing you enter is uploaded or stored on a server. It's free to use with no account required. Browse more developer tools here.
Was this tool helpful?
Related tools
Color Picker
Pick a color and get HEX, RGB, and HSL values with shades and tints.
Image Tools
Aspect Ratio Calculator
Solve missing dimensions for 16:9, 4:3, and any custom aspect ratio.
Calculators
Image Compressor
Shrink image file sizes with a quality slider — no upload, instant preview.
Image Tools
JSON Formatter
Format, validate, and minify JSON with precise error locations.
Developer Tools
Hash Generator
Generate SHA-1, SHA-256, SHA-384, and SHA-512 hashes from any text, live.
Developer Tools
CSV to JSON Converter
Convert CSV to JSON and JSON back to CSV — quotes and commas handled properly.
Developer Tools