Color Contrast Checker
UI ToolsCheck foreground and background color pairs for WCAG 2.1 AA and AAA contrast ratio compliance. Instantly see pass/fail results for normal and large text sizes.
Foreground (Text)
Background
preview
Large text — The quick brown fox
Normal body text — The quick brown fox jumps over the lazy dog. Pack my box with five dozen liquor jugs.
Small text — Fine print, captions, and supplemental copy at 12px.
Contrast Ratio5.17:1
WCAGAA
34.5721
Normal Text✓
AA≥ 4.5:1Normal Text✗
AAA≥ 7:1Large Text✓
AA≥ 3:1Large Text✓
AAA≥ 4.5:1About Color Contrast Checker
The Color Contrast Checker evaluates any foreground and background color pair against the WCAG 2.1 contrast ratio requirements. Enter colors in HEX, RGB, or HSL format and the tool immediately calculates the relative luminance and contrast ratio, then displays pass or fail badges for the four relevant WCAG criteria: AA normal text (4.5:1), AA large text (3:1), AAA normal text (7:1), and AAA large text (4.5:1). An adjustable preview shows your color combination rendered as body text, headings, and UI controls.
Features
- ✓Calculates exact WCAG 2.1 contrast ratio to two decimal places
- ✓Pass/Fail badges for AA and AAA, normal and large text
- ✓Color inputs via picker, HEX, RGB, and HSL
- ✓Live typography preview: body text, heading, link, and button
- ✓Swap foreground and background colors with a single click
- ✓Suggest the nearest compliant color when a pair fails
- ✓Bulk checker: evaluate multiple pairs from a CSV input
- ✓Displays relative luminance values for both colors
Common Use Cases
- Verify that body text on a brand-colored background meets AA requirements
- Check placeholder text color inside form inputs for WCAG compliance
- Audit an existing design system for low-contrast color pairs
- Select an accessible icon color against a UI card background
- Validate focus indicator colors meet the enhanced AAA contrast standard
Frequently Asked Questions
QWhat is the minimum contrast ratio required by WCAG?
WCAG 2.1 Level AA requires a contrast ratio of at least 4.5:1 for normal text and 3:1 for large text (18 pt or 14 pt bold). Level AAA requires 7:1 and 4.5:1 respectively.
QWhat counts as 'large text' in WCAG?
WCAG defines large text as at least 18 pt (24 px) regular weight, or 14 pt (approximately 18.67 px) bold. The preview panel labels which sizes qualify.
QDoes the checker account for semi-transparent colors?
Yes. When alpha values below 1 are present, the tool composites the color against the specified background before calculating luminance, matching real browser rendering.
QHow does the 'suggest nearest compliant color' feature work?
It lightly adjusts the lightness of the failing color along the HSL axis until the contrast ratio crosses the selected threshold, then shows the closest adjusted value.