# Contrast Checker

{% embed url="<https://www.youtube.com/watch?rel=0&v=JBW5xzpVQjY?vq=hd1080>" %}
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**

&#x20;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**

&#x20;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.

<figure><img src="https://1002571793-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F7vhttY58BZbk962dpqY7%2Fuploads%2FM7DWP4Ub6Chc2fDeK9QQ%2Fimage.png?alt=media&#x26;token=94396bbc-5897-4418-b91a-3fb6b72e2c1f" alt=""><figcaption><p>A screenshot of Flowy Color Contrast Checker</p></figcaption></figure>

**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'**

&#x20;Click on the 'Quick Fix' button to confirm the color contrast changes on your web page. That's it. Amazing, right?