Contrast Checker
Check color contrast ratio for WCAG accessibility.
100% Private & Client-Side Execution
Luminance calculations execute locally in your browser without tracking or external calls.
About Contrast Checker
WCAG Color Contrast Checker measures the luminance contrast ratio between foreground text and background colors according to Web Content Accessibility Guidelines (WCAG 2.1). It provides instant compliance pass/fail ratings for AA and AAA standards across normal text, large text, and UI components.
How to Use Contrast Checker
- Enter or pick your Foreground (Text) color using HEX, RGB, or the color picker.
- Enter or pick your Background color.
- Review the calculated contrast ratio displayed prominently (e.g., 4.5:1, 7.1:1).
- Check the compliance checklist for WCAG AA and AAA ratings across small text, large text, and graphical objects.
- Use the live preview card to assess real-world readability with sample typography.
Common Real-World Use Cases
- Accessibility Specialists & Auditors: Validate web page color palettes against ADA, Section 508, and EN 301 549 legal standards.
- UI/UX Designers: Ensure button labels, form placeholders, and body copy remain legible for users with low vision or color blindness.
- Design System Teams: Define accessible brand color tokens with verified minimum contrast thresholds for production components.
- Frontend Engineers: Check theme color combinations before deploying new dark mode and high-contrast UI options.
Technical Specifications & Limitations
Computes relative luminance and contrast ratios from 1:1 (identical colors) up to 21:1 (pure black on pure white) per W3C algorithms.
Frequently Asked Questions
- What is the minimum WCAG contrast ratio for normal body text?
- WCAG 2.1 Level AA requires a minimum contrast ratio of 4.5:1 for normal text (under 18pt or 14pt bold). Level AAA requires 7.0:1.
- What qualifies as "large text" under WCAG standards?
- Large text is defined as at least 18pt (24px) regular weight or at least 14pt (approx. 18.67px) bold weight, requiring a minimum 3:1 ratio for AA.
- Why is color contrast important for digital accessibility?
- Proper contrast ensures text and interactive controls remain readable for users with visual impairments, aging eyes, cataracts, or those viewing screens in bright sunlight.
- Do UI components and form borders require 4.5:1 contrast?
- Under WCAG 2.1 non-text contrast guidelines (Success Criterion 1.4.11), active UI components and graphical objects require at least 3.0:1 contrast against adjacent colors.
- What should I do if my brand colors fail contrast checks?
- Adjust the lightness or saturation of either the text or background color slightly until the ratio reaches at least 4.5:1, or use darker text on light badges.