Color Contrast Checker

The contrast ratio is the difference in brightness between the text (foreground) and the background. Ensuring proper contrast is essential for people with low vision, color blindness, or even users in bright environments to read your content effortlessly.

Ensuring good readability is about more than just accessibility: it improves reading speed, reduces eye strain, and ensures your content is clear on any screen or under any lighting condition. We measure the luminosity ratio (from 1:1 up to 21:1) based on WCAG global standards:

• 3:1 (Minimum Essential): The baseline for large text (over 18pt), icons, and UI components like buttons or borders. This is the core requirement for basic compliance.
• 4.5:1 (Level AA - Industry Standard): The sweet spot for body text. This is the recommended legal and technical standard to ensure most users can navigate without barriers.
• 7:1 (Level AAA - Gold Standard): The highest level of legibility. It provides superior visual comfort, removing barriers for people with low vision or in situations involving prolonged reading.

Unlike basic validators that only point out errors, Contrast Lab mathematically calculates and suggests colors close to your original choice that meet the necessary contrast ratio. Just click the suggested color to apply it and copy its Hex code.

Yes! For icons, input borders, and graphical components, the WCAG recommends a contrast of at least 3:1. You can use the Contrast Lab ratio meter to ensure these elements are also accessible.

Yes, Contrast Lab is a free tool developed to support the community of designers and developers in creating more inclusive digital products.

Our tool utilizes state-of-the-art Computer Vision to audit your design. The process occurs in three steps:

• Detection: Artificial Intelligence scans the image for text elements and identifies the exact coordinates where they appear.
• Color Extraction: For each found text, the AI extracts the specific hexadecimal code for the font color and the predominant background color at that exact point.
• WCAG Calculation: With the color codes in hand, we apply official WCAG mathematical formulas to calculate the true contrast ratio. If the value falls below 4.5:1 (AA) or 7:1 (AAA), we highlight the point in the image so you can correct it.

Images in formats like PNG or JPG undergo compression that slightly alters the pixels. For maximum accuracy, you can click on the generated highlight and manually adjust the hexadecimal code in our calculator.

Contrast Lab is an independent and completely free project. To offer image analysis technology, we use one of the most advanced Artificial Intelligences in the world (Google's Gemini).

• Breathing limit: As we use the community version of this technology, we have a "breathing limit" of 15 analyses per minute for all site users.
• What to do if I hit the limit?: Don't worry! If you receive a "limit reached" warning, simply wait about 60 seconds and try again. It's the time our robots need to grab a coffee and get back to work.

It tests your color palette against different visual conditions (such as color blindness and blurred vision). If your design, text, and buttons remain clear and easy to identify even under the Achromatopsia (grayscale) filter, it means your project has solid contrast and doesn't exclude users with low vision.

It means that this tool is still in the development and research phase. Although it is already available for practical testing, our team continues to work to improve the accuracy and effectiveness of the automatic corrections applied directly to images.