Loading…

How to use WCAG Color Compliance

Pick a text color and a background color; the tool shows the exact contrast ratio and a pass or fail badge for each WCAG level and text size.

Frequently asked questions

Does WCAG AA need 4.5:1?

Yes — WCAG AA requires a 4.5:1 contrast ratio for normal text and 3:1 for large text. AAA raises this to 7:1 and 4.5:1.

What size counts as large text?

Text at 18pt (24px) or 14pt bold (about 18.66px bold) is treated as large text and uses the lower thresholds.

What is the 3:1 rule for?

3:1 is the minimum for large text and for user-interface components and graphical objects under WCAG 2.1.

More Color Tools

Color Mixer
Blend two colors with a ratio slider and preview the mix
Tints & Shades Generator
Generate a complete range of tints and shades from any color
Gradient Color Steps
Generate N evenly-spaced colors between two endpoints
Color Harmonies
Generate complementary, triadic and analogous palettes
Random Palette Generator
Generate beautiful random color palettes with one click
Color Opacity / RGBA
Add alpha transparency to any color and get rgba() values
Image Color Extractor
Upload an image to extract its dominant color palette
Color Blindness Simulator
Simulate how your palette looks with different color blindness
Color Name Finder
Find the nearest CSS named color for any hex value
CSS Color Names Reference
Complete table of all 148 CSS named colors with hex values
Tailwind Color Finder
Browse and copy the complete Tailwind CSS color palette
Color Distance Calculator
Measure perceptual color difference using the ΔECIEDE2000 metric

← View all Color ToolsBrowse all 1,100+ tools →