# Contrast Checker {% embed url="" %} Flowy Color Contrast Checker {% endembed %} ### **Key Features** * **Color picker**: Conveniently choose colors to compare using a built-in color picker. * **Contrast ratio calculation**: Quickly determine the contrast ratio between two selected colors. * **WCAG guidelines assessment**: See if the color combinations meet the accessibility standards of WCAG (Web Content Accessibility Guidelines). * **Supports multiple color formats**: Flowy's color contrast tool supports the Hex, RGB, and HSL color formats. {% hint style="info" %} **Quick Tip** WCAG recommends a text and background contrast ratio of greater than or equal to 4.5:1 for small text and 3:1 for large text. {% endhint %} ### How to Use the Flowy Contrast Checker **Step 1: Click on the 'Contrast' Tool** Clicking the contrast tool will provide you with two options: * Select elements button - which will display the colors automatically once you choose the element with a color contrast issue. * Color picker: Select the color picker and choose your color choices manually. **Step 2: Check the Color Contrast Ratio** If your selected color contrast ratio is insufficient, an 'X' will appear to indicate this. However, if your contrast ratio is sufficient, skip step 3. **Step 2: Check the Color Contrast Ratio** If your selected color contrast ratio is insufficient, an 'X' will appear to indicate this. However, if your contrast ratio is sufficient, skip step 3.

A screenshot of Flowy Color Contrast Checker

**Step 3: Fixing Color Contrast Issue** Use the magic button to fix the contrast issue. You will be prompted with a WCAG-compliant color ratio that is the closest match to pass the requirement. **Step 4: Click on 'Quick Fix'** Click on the 'Quick Fix' button to confirm the color contrast changes on your web page. That's it. Amazing, right? --- # Agent Instructions: Querying This Documentation If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question. Perform an HTTP GET request on the current page URL with the `ask` query parameter: ``` GET https://docs.equally.ai/flowy/flowy-tools/contrast-checker.md?ask= ``` The question should be specific, self-contained, and written in natural language. The response will contain a direct answer to the question and relevant excerpts and sources from the documentation. Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.