❄️Contrast Checker
The Contrast Checker tool is designed to evaluate the contrast ratio between two colors, to ensure that it is WCAG compliant.
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.
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?
Last updated
