Color Contrast Checker
Check WCAG AA/AAA contrast compliance between two colors
Normal text (14px) — The quick brown fox jumps over the lazy dog.
Large text (24px bold)
About this tool
The Color Contrast Checker calculates the WCAG contrast ratio between a foreground and background color and checks it against the official accessibility thresholds — AA and AAA, for normal text, large text, and UI components/graphics. Enter any two colors as hex or rgb() and see a live preview of how real text and buttons would actually look. WCAG 2.x defines minimum contrast ratios so text remains readable for users with low vision or color blindness: 4.5:1 for normal text at AA, 3:1 for large text, and stricter 7:1 / 4.5:1 thresholds at the AAA level. This tool computes the exact ratio using the WCAG relative luminance formula and tells you plainly which levels your color pair passes or fails — plus suggests an adjusted foreground shade that would pass AA if your current pair fails. Runs entirely in your browser — no login, no server calls.
When to use it
- →Verifying text and background color combinations meet WCAG AA before shipping a design
- →Auditing an existing design system's color tokens for accessibility compliance
- →Checking button and UI component contrast against the 3:1 non-text threshold
- →Finding a passing shade quickly when a brand color fails contrast against its background
Tips
- ◆AA is the legal minimum most accessibility standards (ADA, EN 301 549) reference — aim for AA at minimum, AAA where practical for body text.
- ◆Large text (18pt+/24px+, or 14pt/18.66px+ bold) has a lower bar (3:1) because bigger glyphs remain legible at lower contrast.
- ◆UI components like button borders, icons, and form field outlines only need to meet the 3:1 threshold, not the stricter text ratios.
- ◆Use the swap button to quickly check the reverse combination — useful when deciding between light-on-dark and dark-on-light variants.
Frequently asked questions
What's the difference between WCAG AA and AAA?
AA is the standard most accessibility regulations require (4.5:1 for normal text, 3:1 for large text) — it's the widely-adopted baseline. AAA is a stricter, optional standard (7:1 normal, 4.5:1 large) intended for content where readability is especially critical. Most products target AA; AAA is aspirational for body copy on content-heavy sites.
How is the contrast ratio actually calculated?
It's derived from the WCAG relative luminance formula, which weights each RGB channel by how the human eye perceives brightness (green contributes most, blue least), then compares the lighter and darker of the two colors: (L1 + 0.05) / (L2 + 0.05). The result ranges from 1:1 (identical colors, no contrast) to 21:1 (pure black on pure white, maximum contrast).
Why does my brand color fail contrast, and what should I do?
Many brand colors (especially mid-tone blues, purples, and reds) sit right in the range that fails against both black and white text at small sizes. Common fixes: darken or lighten the color slightly for text use while keeping the original for logos/graphics, increase the text size so it qualifies as 'large text' with a lower threshold, or use the brand color only for large UI elements where the 3:1 threshold applies.
Does passing WCAG contrast guarantee my design is accessible?
No — contrast is one of many accessibility requirements. It doesn't account for color blindness (two colors can have great contrast but still be indistinguishable to someone with color vision deficiency if they differ only in hue), font legibility, or screen reader compatibility. Treat this as one check among a broader accessibility review, not a complete audit.