Contrast Checker

Verify WCAG 2.1 color contrast ratios for high-performance accessible design.

Foreground (Text)

HEX

Background

HEX

Contrast Ratio

12.44:1

verifiedAAA Compliant

Optimization

SMART ADJUST

UtilVox adjusts the luminosity while preserving your color hue to meet target standards.

WCAG 2.1 Requirements

AA Normal Text

Min. 4.5:1

PASS

AAA Normal Text

Min. 7.0:1

PASS

AA Large Text

Min. 3.0:1

PASS

AAA Large Text

Min. 4.5:1

PASS

Simulation

How people with normal see your colors.

Color vision deficiency affects roughly 1 in 12 men and 1 in 200 women. Use these simulations to ensure your UI elements remain distinct even without color cues.

FG: #F5C842

BG: #0A0A0F

How It Works

Choose Colors

Select or enter your foreground and background hex codes.

Verify Ratios

Check real-time compliance with WCAG 2.1 AA/AAA standards.

Preview UI

Visualize and test contrast under different color-blindness conditions.

Contrast & Accessibility FAQ

What defines 'Large Text' in WCAG?expand_more

Large text is defined as at least 18pt (roughly 24px) or 14pt (roughly 18.66px) bold. Most body text is considered 'Normal Text' and requires higher contrast.

Why is 4.5:1 the magic number?expand_more

A contrast ratio of 4.5:1 was chosen for Level AA because it compensates for the loss of contrast sensitivity usually experienced by users with vision loss equivalent to approximately 20/40.

Does contrast matter for dark mode?expand_more

Absolutely. In fact, high-contrast issues can be even more pronounced in dark mode due to 'haloing' or glare. Maintaining WCAG standards ensures comfortable reading for all environments.

How does the Auto-fix tool work?expand_more

UtilVox calculates the nearest color that meets your target ratio by shifting the luminosity (brightness) while keeping the hue and saturation as close to the original as mathematically possible.