Color Contrast Checker
Check text and background color contrast ratios for WCAG AA and AAA compliance. Test normal text, large text, and UI components instantly. See a live website mockup to understand exactly how your colors look in real designs. Already picked a color from a photo? Use the Image Color Picker and paste it straight in here.
Design with Accessible Colors
Great design starts with readable, accessible color choices. Your users deserve interfaces that work for everyone.
Get Started → Learn MoreAccessibility
Build interfaces usable by everyone, including users with low vision.
Performance
Fast, efficient interfaces that load quickly and respond instantly.
Aesthetics
Beautiful designs that communicate your brand and delight users.
Manage your account settings, update your profile details, and configure your notification preferences all in one place.
Edit Profile →WCAG Contrast Requirements
| Level | Normal Text | Large Text | UI Components |
|---|---|---|---|
| WCAG AA | 4.5 : 1 | 3.0 : 1 | 3.0 : 1 |
| WCAG AAA | 7.0 : 1 | 4.5 : 1 | — |
| Fail | Below 4.5 : 1 | Below 3.0 : 1 | Below 3.0 : 1 |
Large text is 18pt (24px)+ regular or 14pt (18.67px)+ bold. These have lower requirements because larger text is easier to read at reduced contrast.
Frequently Asked Questions
About This Tool
Free Color Contrast Checker for WCAG AA and AAA Compliance
This free color contrast checker tests any text color and background color combination against WCAG 2.1 standards instantly. Enter your colors in HEX or use the color picker, then see your contrast ratio, all five WCAG badges, and a live website mockup showing how your colors look in real context.
Unlike generic contrast checkers that just show you a number, this tool includes live previews across three design contexts: website layout, UI card, and text sizes. You can see not just the ratio but what it actually means for your design. When colors fail, the tool also suggests the closest accessible alternatives so you can fix issues without completely abandoning your color choices. Need to find a color from an image first? Use our Image Color Picker to extract any color from a photo, then paste the HEX code here.
Text Color and Background Color Contrast Explained
The contrast ratio between your text color and background color is the most important accessibility metric in web design. A ratio of 1:1 means the colors are identical and completely unreadable. The maximum possible ratio is 21:1, which is pure black on pure white. WCAG defines minimum ratios based on the size and weight of the text.
For most body text at 16px, you need at least 4.5:1 to pass WCAG AA. For large headings at 24px or larger, the requirement drops to 3:1 because larger text is easier to read at lower contrast. For icons, buttons, and UI components, the minimum is also 3:1. This tool checks all five of these thresholds simultaneously every time you enter a color pair.
WCAG AA vs AAA Compliance
WCAG AA: The Legal Standard
Requires 4.5:1 for normal text and 3:1 for large text and UI components. WCAG AA compliance is required by the Americans with Disabilities Act (ADA) in the United States, Section 508 for federal agencies, the Accessibility for Ontarians with Disabilities Act (AODA) in Canada, and EN 301 549 across the European Union. Most businesses targeting these markets should meet AA as a baseline minimum.
WCAG AAA: Enhanced Accessibility
Requires 7:1 for normal text and 4.5:1 for large text. AAA compliance is recommended for healthcare, government, financial services, and any application where the widest possible audience must be served, including users with low vision or color vision deficiencies. AAA is not always achievable for every color combination in a design system, but it is worth targeting where possible.
Who Uses a Color Contrast Checker?
Web designers use contrast checkers before finalizing color choices and handing off designs to developers. Frontend developers verify CSS color combinations meet accessibility requirements during implementation. Brand designers ensure brand colors are accessible when applied in digital contexts, since a brand color that looks great in print may fail contrast requirements on screen. Accessibility auditors and QA teams run contrast checks as part of pre-launch compliance testing. Product managers use contrast checking as a gate in the design review process to catch accessibility issues before they reach production. If you need to build a full accessible color palette from scratch, our Color Palette Generator can help you create harmonious color schemes to test here.
Use the Color Name Finder to identify the name of any color from its HEX or RGB code — useful when you need to communicate a color to a client or paint store.