WCAG 2.1 Color Contrast Checker
Test foreground and background color combinations against the W3C Web Content Accessibility Guidelines. Evaluate AA and AAA compliance for normal text, large headings, and UI components with real-time visual rendering.
Color Inputs
Select foreground and background hex values to compute the sRGB relative luminance contrast ratio.
Excellent contrast. Exceeds WCAG AAA requirements for all text sizes.
WCAG 2.1 Contrast Thresholds
Live Visual Rendering Sandbox
Preview how headings, body text, badges and buttons appear with your chosen colors.
Large Display Heading (24px+)
This is regular 14px–16px body copy rendered on your chosen background surface. When evaluating typography, also consider ambient glare, mobile brightness and user eye strain.
Important Accessibility Caveat
A passing contrast ratio is necessary, but does not describe a color pair as fully WCAG-compliant on its own. Complete accessibility also requires readable font sizes, adequate line spacing, focus indicators, keyboard access, screen-reader semantics, and avoiding color as the sole conveyor of information.
Understanding WCAG Contrast Standards
Level AA (Minimum)
The international benchmark for public and commercial websites. Requires at least 4.5:1 for normal text and 3.0:1 for large text (18pt or 14pt bold).
Level AAA (Enhanced)
Intended for specialized readability, healthcare platforms, and high-legibility document portals. Demands 7.0:1 for standard text and 4.5:1 for large text.
Graphical Objects & UI
WCAG 2.1 added criterion 1.4.11 requiring 3:1 contrast for input borders, checkboxes, navigation icons and active focus rings against adjacent colors.