Check the contrast ratio between two colours against WCAG AA and AAA accessibility levels.
How to use the Contrast Checker
Pick a text colour and a background colour.
Read the contrast ratio and the WCAG pass or fail badges.
Adjust the colours until they pass the level you need.
This is a WCAG color contrast checker that shows the exact contrast ratio between a text color and a background color, and whether it meets the AA and AAA accessibility levels. Pick colors with the swatch or by hex code and see a live preview.
Adjust the two colors until the badges pass the level you need, and the result updates instantly as you go.
Text that is too close in lightness to its background is hard or impossible to read, especially for people with low vision or color vision deficiencies, or for anyone on a phone in bright sunlight. Enough contrast keeps your content legible for everyone.
The Web Content Accessibility Guidelines (WCAG) set the standard. AA, the level most sites aim for and that many accessibility laws reference, requires a ratio of 4.5:1 for normal text and 3:1 for large text. AAA is stricter at 7:1 and 4.5:1.
Large text gets a lower threshold because bigger letters stay legible at less contrast. It counts as large at roughly 24px (18pt), or 18.66px (14pt) when bold.
The ratio comes from the relative luminance of the two colors using the official WCAG formula, producing a value from 1:1 (no contrast, identical colors) up to 21:1 (black on white).
Everything is calculated in your browser, so it is instant and private. Nothing you pick is uploaded anywhere.
Frequently asked questions
WCAG AA requires 4.5:1 for normal text and 3:1 for large text (18pt or 14pt bold). AAA requires 7:1 and 4.5:1 respectively.
Text that is at least 24px (18pt), or 18.66px (14pt) when bold. Large text is allowed a lower contrast ratio.
From the relative luminance of each colour using the official WCAG formula, giving a value from 1:1 (no contrast) to 21:1 (black on white).
Sufficient contrast keeps text readable for people with low vision or color vision deficiencies, and for everyone in poor lighting. It is a core part of an accessible, usable site.
The Web Content Accessibility Guidelines, the international standard for making web content accessible. Its AA level is widely referenced by accessibility laws and policies.
Embed this tool
Add this tool to your own website. Copy the snippet below; it stays up to date automatically.
<iframe src="https://monu.tools/embed/en/color-contrast-checker" width="100%" height="640" style="border:1px solid #e5e5e5;border-radius:12px;max-width:680px" loading="lazy" title="Monu Tools"></iframe>Related tools
Format and beautify SQL queries with clause line breaks and consistent keyword casing, or minify them to a single line.
Beautify XML with proper indentation, or minify it to a single line. Comments, CDATA and processing instructions are preserved.
Beautify CSS with clean indentation, or minify it to shrink file size. Handles media queries, calc() and license comments.
Beautify HTML with block-aware indentation, or minify it. The contents of pre, textarea, script and style are preserved.