Accessibility Color Checker
Check color contrast ratios for WCAG 2.1 accessibility compliance. Ensure your text and UI components meet AA and AAA standards for normal and large text sizes.
Color Selection
Contrast Ratio: 21.00:1
Excellent contrast - Passes AAA for all text sizes
Visual Preview
Normal Text (16px)
The quick brown fox jumps over the lazy dog. This is how your text will appear with the selected color combination.
Large Text (24px+)
The quick brown fox jumps over the lazy dog.
WCAG 2.1 Compliance
Normal Text
Level AA
Required: 4.5:1
✓ Pass (21.00:1)
Large Text
Level AA
Required: 3:1
✓ Pass (21.00:1)
UI Components
Level AA
Required: 3:1
✓ Pass (21.00:1)
Normal Text
Level AAA
Required: 7:1
✓ Pass (21.00:1)
Large Text
Level AAA
Required: 4.5:1
✓ Pass (21.00:1)
Color Values
Foreground
#000000Background
#FFFFFFRecommended Settings
WCAG Compliance Levels
- •Level AA (4.5:1) is the legal standard for most websites and applications
- •Level AAA (7:1) provides enhanced accessibility for users with low vision
- •Large text (18pt+ or 14pt+ bold) has more relaxed requirements (3:1 for AA)
- •UI components like buttons and form controls need 3:1 minimum contrast
- •Higher contrast ratios benefit all users, especially in bright environments
Design Best Practices
- •Aim for 7:1 (AAA) contrast when possible for optimal accessibility
- •Test your colors in different lighting conditions and on different screens
- •Don't rely solely on color to convey information (use icons, text, patterns)
- •Consider color blindness - red/green combinations can be problematic
- •Use this tool early in the design process to avoid accessibility rework
Pro Tips
- •Black text on white background (#000000 on #FFFFFF) has a 21:1 contrast ratio
- •Use the swap button to quickly test foreground and background in reverse
- •Large text is defined as 18pt (24px) regular or 14pt (18.66px) bold or heavier
- •All checks happen client-side - your color choices remain completely private
Most Popular
Level AA (4.5:1) for normal text is the most common legal requirement
When to Use This Tool
Ensure your website meets WCAG 2.1 Level AA standards required by law in many countries. Check all text, buttons, links, and UI components for sufficient contrast before launching your site.
Build accessible color palettes for your design system. Test every text/background combination to ensure all variants meet WCAG standards. Document passing combinations for developers to use.
Validate brand colors for accessibility before finalizing. Ensure your primary brand colors can be used for text without violating WCAG standards. Create accessible color alternatives when needed.
Check button colors, form inputs, navigation menus, and interactive elements. WCAG 2.1 requires 3:1 contrast for UI components. Test all states: default, hover, focus, disabled.
Verify dark mode color schemes meet accessibility standards. Dark backgrounds often require lighter text colors with sufficient contrast. Test both light and dark themes thoroughly.
Audit existing websites for ADA and Section 508 compliance. Many lawsuits target color contrast violations. Document all color combinations and their compliance status for legal protection.
How It Works
Enter or select foreground (text) color using color picker or HEX input
Enter or select background color using color picker or HEX input
Tool converts HEX colors to RGB values
Calculates relative luminance for each color using WCAG 2.1 formula
Computes contrast ratio: (lighter + 0.05) / (darker + 0.05)
Compares ratio against WCAG standards for different text sizes
Displays pass/fail status for AA and AAA compliance levels
Shows visual preview of text on background in different sizes
100% Private
Files never leave your device. All processing happens locally in your browser.
Lightning Fast
Powered by Direct implementation of WCAG 2.1 contrast ratio formula (relative luminance calculation) for optimal performance on modern browsers.
Open Source
Built with verified, open-source libraries. Fully transparent.
Frequently Asked Questions
What's the difference between WCAG Level AA and AAA?
Level AA requires 4.5:1 contrast for normal text and 3:1 for large text - this is the legal standard in most jurisdictions. Level AAA requires 7:1 for normal text and 4.5:1 for large text - this provides enhanced accessibility but is not legally required. Most websites aim for AA compliance as a minimum.
What is considered 'large text' in WCAG?
Large text is defined as 18 point (24px) or larger for regular weight text, or 14 point (18.66px) or larger for bold text. Large text has more relaxed contrast requirements (3:1 for AA vs 4.5:1 for normal text) because it's easier to read at lower contrast.
Do I need to meet AAA standards?
Not usually - Level AA is the legal requirement for most websites and applications (ADA, Section 508, European Accessibility Act). Level AAA is recommended for content targeting users with low vision or in situations where maximum accessibility is needed, but it's not legally required.
What about UI components like buttons and icons?
WCAG 2.1 added requirements for graphical objects and UI components - they need 3:1 minimum contrast against adjacent colors. This applies to buttons, form controls, focus indicators, and icons. The tool checks this under 'UI Components AA' with the 3:1 requirement.
Why does my design fail the contrast check?
Common causes: light gray text on white backgrounds, colored text on colored backgrounds, or insufficient contrast in branded color schemes. Solutions: darken the foreground color, lighten the background, or use this tool to find the minimum adjustments needed to pass.
Can I use color alone to convey information?
No - WCAG requires that information conveyed by color is also available through other means (text, icons, patterns). For example, don't use only red/green to show errors/success - also use icons and text labels. This helps color blind users and ensures accessibility.
How is contrast ratio calculated?
The contrast ratio formula is (L1 + 0.05) / (L2 + 0.05) where L1 is the relative luminance of the lighter color and L2 is the darker color. Luminance is calculated from RGB values using a specific formula defined in WCAG. The ratio ranges from 1:1 (no contrast) to 21:1 (black on white).
Is my color data secure?
Absolutely! All contrast calculations happen entirely in your browser using client-side JavaScript. No color values are sent to any server, ensuring complete privacy for your design work. The tool works completely offline after the page loads.