Color Contrast Checker — WCAG 2.2 Accessibility Tool
Verify color combinations against Web Content Accessibility Guidelines (WCAG) 2.2 standards. Enter text and background hex colors to calculate exact contrast ratios and ensure your buttons, links, and text pass AA and AAA compliance for all users across desktop and mobile devices.
Contrast Demo
This is how your text will look to users.
Why Accessibility Matters in Marketing
If users can't read your call-to-action buttons due to poor contrast, they won't click them. Always aim for a contrast ratio of at least 4.5:1 to ensure readability across all screens and vision types.
How to Use
- 1Enter your foreground text color and background color hex codes.
- 2Review the calculated contrast ratio (e.g. 7.5:1).
- 3Check pass/fail indicators for normal text, large text, and UI components.
Common Use Cases
- ✓
Auditing website button and link accessibility for ADA and WCAG compliance.
- ✓
Selecting brand color palette combinations for digital design systems.
- ✓
Ensuring mobile app interfaces remain legible in bright sunlight.
Frequently Asked Questions
What contrast ratio is required for WCAG AA compliance?
What is the difference between AA and AAA levels?
Does the tool support RGB and HSL inputs?
Related Tools You Might Like
Handy utilities in Design & Media Tools
Color Palette Generator
Generate free color palettes: lock swatches, check WCAG contrast, preview color-blindness, export CSS, Tailwind, SVG & PNG. No sign-up.
QR Code Generator
Make free QR codes online with your logo, colors and dot styles — URL, WiFi, vCard, WhatsApp. Download PNG or SVG. Static codes that never expire.
Design Toolkit Unit Calculator
Convert pixels to REM, calculate modular typographic scales, and compute responsive fluid font clamps. Free calculator for UI and UX designers.