Test the contrast between text and background against WCAG AA and AAA levels, see a live preview and get a suggested accessible color.
Contrast ratio measures the luminance difference between two colors and ranges from 1:1 (identical colors) to 21:1 (black on white). The WCAG 2.1 accessibility guidelines require at least 4.5:1 for normal text and 3:1 for large text at level AA, the threshold used by most accessibility laws, and 7:1 and 4.5:1 respectively at the stricter AAA level. UI components and graphical objects (input borders, icons, charts) need at least 3:1 under criterion 1.4.11. This tool uses the exact WCAG relative luminance formula, composites translucent colors over the background before measuring, and when contrast fails it suggests a lighter or darker version of the text that passes AA, keeping the original hue whenever possible.
Paste the code into your HTML and the tool shows up on your page, without J-Kit's navigation and ads. It still runs in the browser of whoever visits your site.
<iframe
src="https://jkit.tools/embed/en-US/color-contrast-checker"
width="100%"
height="600"
style="border:0"
loading="lazy"
title="Color Contrast Checker"
></iframe>These references help contextualize formulas, standards, APIs and limitations used on this page. They do not replace professional validation when a result has legal, financial, medical or operational impact.
AA is the conformance level adopted by most legislation and requires 4.5:1 for normal text and 3:1 for large text. AAA is stricter (7:1 and 4.5:1) and is not always achievable for all content. For most sites, reaching AA already ensures good readability; aim for AAA on critical content.
Large sample text
This is a normal paragraph used to judge the readability of the chosen contrast.
Button / borderPasses level AAA for normal text
All luminance and contrast math runs in your browser. No color is sent to any server.