❄️Contrast Checker

The Contrast Checker tool is designed to evaluate the contrast ratio between two colors, to ensure that it is WCAG compliant.

Flowy Color Contrast Checker

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.

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.

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?