Loading…

How to use Color Contrast Checker

Pick a foreground and background color, and the tool calculates the contrast ratio and shows whether it passes WCAG AA and AAA.

Frequently asked questions

What is WCAG?

Web Content Accessibility Guidelines — standards ensuring web content is accessible to people with disabilities.

What contrast ratio is required?

WCAG AA requires 4.5:1 for normal text, 3:1 for large text. AAA requires 7:1 and 4.5:1 respectively.

What counts as large text?

18pt (24px) or 14pt bold (approximately 18.67px bold) is considered large text.

More Color Tools

WCAG Color Compliance
Test all WCAG 2.1 text size requirements with pass/fail badges
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

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