Design Tools
Color Contrast Checker
Check color contrast ratio for accessibility. Ensure WCAG AA/AAA compliance for text and background colors.
Use Color Contrast Checker to get instant results without uploads or sign-ups. Everything runs securely in your browser for fast, reliable output.
Your results will appear here.
About this tool
Color contrast affects readability and accessibility. Our Color Contrast Checker calculates contrast ratios and verifies WCAG 2.1 compliance for inclusive web design.
WCAG standards ensure content is readable for people with visual impairments, including color blindness and low vision. Meet AA (minimum) or AAA (enhanced) standards.
Usage examples
Good Contrast
Black text on white background
#000000 on #FFFFFF = 21:1 ratio (AAA Pass)
Poor Contrast
Light gray on white
#CCCCCC on #FFFFFF = 1.6:1 ratio (Fail)
How to use
- Enter "Foreground Color" (text color) in HEX.
- Enter "Background Color" in HEX.
- Click "Check" to calculate contrast ratio.
- See WCAG AA/AAA pass/fail results.
Benefits
- WCAG compliance check
- Contrast ratio calculation
- AA/AAA pass/fail
- Accessibility assurance
- Readable design
- Legal compliance
FAQs
What is WCAG contrast ratio?
WCAG (Web Content Accessibility Guidelines) requires minimum contrast ratios: 4.5:1 for normal text (AA), 3:1 for large text (18pt+ or 14pt+ bold) (AA), 7:1 for normal text (AAA), 4.5:1 for large text (AAA). Higher ratio = easier to read.
What is the difference between WCAG AA and AAA?
WCAG Level AA: minimum compliance, legally required in many countries, 4.5:1 normal text, 3:1 large text. Level AAA: enhanced compliance, recommended but not always required, 7:1 normal text, 4.5:1 large text. Most organizations aim for AA as baseline.
Why is color contrast important?
Good contrast ensures readability for: low vision users (30M+ in US), colorblind users (8% of men, 0.5% women), older users (aging reduces contrast sensitivity), bright sunlight viewing, and reduces eye strain. Also legally required (ADA, Section 508, EU Accessibility Act).
How do I fix poor contrast?
To improve contrast: darken text or lighten background (or vice versa), increase font size (requires less contrast), use bold text, avoid pure gray on white, test with contrast checker, use color palette generators with built-in contrast checks.
Do images and icons need contrast checking?
Yes, WCAG 2.1 requires 3:1 contrast for: UI components (buttons, form borders), graphical objects (icons conveying information), and focus indicators. Decorative images exempt. Logos exempt. Test icon colors against backgrounds.
What tools check color contrast automatically?
Contrast checkers: WebAIM Contrast Checker, Chrome DevTools (Lighthouse), WAVE browser extension, Stark (Figma/Sketch plugin), Colour Contrast Analyser (desktop app). Many include color suggestions to fix issues. Browser DevTools now show contrast ratios in color picker.
What is the minimum contrast ratio I need?
Minimum ratios depend on context: WCAG AA requires 4.5:1 for normal text (under 18pt or 14pt non-bold) and 3:1 for large text (18pt+ or 14pt+ bold). UI components and graphics need 3:1. For AAA (enhanced), use 7:1 for normal text, 4.5:1 for large text. When in doubt, aim for 4.5:1 minimum.
Does contrast ratio matter for decorative elements?
No! WCAG only requires contrast ratios for functional elements: text content, interactive UI components (buttons, forms), meaningful icons/graphics. Purely decorative images, disabled controls, and logos are exempt. Focus contrast efforts on elements users need to read or interact with.
Related tools
View all toolsAspect Ratio Calculator Advanced
Calculate aspect ratios, resize images proportionally, and convert between ratios. Advanced aspect ratio calculations.
Design ToolsColor Blindness Simulator
Simulate how colors appear with different types of color blindness. Test designs for colorblind accessibility.
Design ToolsColor Picker Calculator
Calculate color values in HEX, RGB, and HSL formats. Convert between color formats and get color codes.
Design Tools