WCAG Color Contrast Checker

Enter foreground and background colors to check WCAG contrast ratios for normal text, large text and UI elements.

This checker is for designers, developers and editors who need a quick accessibility pass before shipping a page, component or brand color update. It calculates the WCAG contrast ratio locally from two hex colors.

What the result shows

The output reports the contrast ratio and pass or fail status for normal text, large text and the 3:1 non-text UI threshold. The live preview helps catch combinations that technically pass but still feel weak in context.

Scope

The tool checks color contrast only. It does not inspect a full page, font rendering, hover states or disabled controls.