Color Contrast Checker — WCAG Compliance
Check the contrast ratio between text and background colors against WCAG AA and AAA accessibility standards. Ensure your designs are readable for all users.
Heading Text
This is a preview of how your text will appear on the selected background color. Check if it's easy to read.
Smaller text sample for testing readability at different sizes.
Contrast Ratio
Excellent
Text
0.000
Background
1.000
AA Normal: Minimum 4.5:1 for regular text
AA Large: Minimum 3:1 for large text (18px+ or 14px+ bold)
AAA Normal: Enhanced 7:1 for regular text
Related Color Tools
What Is Color Contrast and Why Does It Matter?
Color contrast measures how distinguishable two colors are from each other. High contrast means text stands out clearly against its background; low contrast makes it hard to read. For users with visual impairments, low vision, or color blindness, insufficient contrast can make content completely inaccessible.
Understanding WCAG 2.1 Contrast Requirements
The Web Content Accessibility Guidelines (WCAG) define specific contrast ratio thresholds that determine whether text-background combinations are accessible:
Level AA (Minimum)
- • 4.5:1 for normal text (under 18px or 14px bold)
- • 3:1 for large text (18px+ or 14px+ bold)
- • 3:1 for UI components and graphical objects
Level AAA (Enhanced)
- • 7:1 for normal text
- • 4.5:1 for large text
- • Recommended for critical content
How Contrast Ratio Is Calculated
The contrast ratio formula compares the relative luminance of two colors. Luminance measures how bright a color appears to the human eye, accounting for the fact that we perceive green as brighter than blue:
The contrast ratio is then calculated as (L1 + 0.05) / (L2 + 0.05), where L1 is the lighter color and L2 is the darker. Results range from 1:1 (identical colors) to 21:1 (black on white).
Real-World Use Cases
Pre-Launch Accessibility Audit
Before deploying a website, a developer tests all text-background combinations. Gray text (#6B7280) on white (#FFFFFF) scores 5.0:1 — it passes AA but fails AAA. They darken it to #4B5563 for a 7.2:1 ratio.
Design System Validation
A design team defines color tokens for their component library. They use this checker to verify that every text-color/background-color pair in their system meets at least AA standards before publishing.
Marketing Material Review
A marketing designer creates a brochure with light blue text on a dark blue background. The contrast checker shows 2.8:1 — failing even large text requirements. They adjust to a much lighter blue, achieving 5.1:1.
Dark Mode Testing
A developer implements dark mode and needs to ensure inverted colors remain accessible. Pure white (#FFFFFF) on pure black (#000000) scores 21:1 — too harsh. They switch to #E5E5E5 on #1A1A1A for a comfortable 12.6:1.
Common Contrast Mistakes to Avoid
Light gray on white. It looks elegant in design mockups but fails accessibility. #D1D5DB on #FFFFFF scores only 1.6:1. Use #6B7280 or darker for body text.
Red on green (or vice versa). Even if the luminance contrast is adequate, users with red-green color blindness may struggle to distinguish them. Always check the numeric ratio.
Gradient backgrounds. Text that's readable at the top of a gradient might disappear at the bottom. Test against the lightest and darkest points of any gradient.
Opacity overlays. Semi-transparent backgrounds can reduce contrast unexpectedly. Calculate the final composite color after blending with the background.
Hover states. A button's hover color might have lower contrast than its default state. Test all interactive states, not just the resting appearance.
Frequently Asked Questions
What's the minimum contrast ratio for accessibility?
WCAG AA requires 4.5:1 for normal text and 3:1 for large text (18px+ or 14px+ bold). WCAG AAA requires 7:1 for normal text and 4.5:1 for large text. Aim for AA as a minimum, AAA for critical content.
Does this tool check color blindness accessibility?
This checker measures luminance contrast, which is the primary WCAG requirement. Color blindness affects hue perception, not luminance. However, avoid relying solely on color to convey information — use labels, patterns, or icons as backups.
Why does my color combination pass AA but fail AAA?
AAA standards are stricter. A contrast ratio of 5.5:1 passes AA for normal text (requires 4.5:1) but fails AAA (requires 7:1). For most content, AA is legally sufficient. AAA is recommended for essential information like error messages or critical instructions.
How do I fix low contrast without changing my brand colors?
Keep your brand color for backgrounds and accents, but use a darker or lighter shade for text. For example, if your brand blue is #3B82F6, use #1E3A8A (much darker) for text on light backgrounds, or #DBEAFE (much lighter) for text on dark backgrounds.
What counts as "large text"?
WCAG defines large text as 18pt (24px) or larger, or 14pt (18.5px) or larger if bold. Headings typically qualify; body text usually doesn't. When in doubt, test against the stricter normal text requirements.
Can I use this for non-web content?
Yes, the WCAG contrast formula applies to any digital or print content. PDFs, mobile apps, presentation slides, and even printed materials benefit from adequate contrast for readability.
How This Tool Compares
vs. WebAIM Contrast Checker: This tool provides the same WCAG compliance checking with a live preview that shows your actual colors in context, plus the ability to test different font sizes instantly.
vs. Browser DevTools: Chrome and Firefox have built-in contrast checkers, but they only work on rendered elements. This tool lets you test color combinations before writing any code.
vs. Design software plugins: Figma and Sketch plugins require you to have the design file open. This checker works anywhere — paste hex codes from a Slack message, email, or design spec.
Other Free Color Tools
Text Color Suggestion Tool
Enter a background color and get instant suggestions for readable, accessible text colors. Designed to help you meet contrast requirements effortlessly.
Palette Contrast Viewer
Visualize contrast levels between every color pair in your palette. Quickly spot inaccessible combinations before they reach production.
Complementary Color Finder
Find the complementary color of any given color instantly. Use complementary pairs to create high-contrast, visually dynamic designs.
Color Picker
Pick any color using an interactive palette or enter HEX, RGB, or HSL values. Copy your color code instantly for use in any design or development project.
Color Palette Generator from Base Color
Generate a beautiful, harmonious color palette from a single base color. Perfect for building consistent UI color schemes and brand identities.
Color Harmony Generator
Generate complementary, analogous, triadic, and tetradic color palettes based on color theory. Build harmonious color schemes for any design project.