What contrast ratio does WCAG require?

WCAG 2.1 Level AA requires 4.5:1 for normal text (below 18pt) and 3:1 for large text (18pt+ or 14pt bold). Level AAA requires 7:1 for normal text and 4.5:1 for large text.

Does this check UI components too?

Yes. Non-text UI components (icons, input borders, focus indicators) need a 3:1 ratio against adjacent colors under WCAG 1.4.11.

Can I enter colors in different formats?

Yes. HEX (#RRGGBB), RGB (rgb(r,g,b)), and HSL (hsl(h,s%,l%)) inputs are all supported.

Best Free Color Contrast Checker

WCAG accessibility guidelines require a minimum contrast ratio between text and background colors — 4.5:1 for normal text and 3:1 for large text at AA level. Failing to meet these requirements makes content inaccessible to users with low vision and can create legal compliance issues. devtoolkit.sh's Contrast Checker calculates the exact contrast ratio between any two colors, shows whether they pass WCAG 2.1 AA and AAA levels for normal and large text, and provides a live preview of the text on the background. Enter colors in HEX, RGB, or HSL format. Results update in real time as you adjust the values. This is an essential tool for UI designers, front-end developers, and accessibility auditors.

Foreground color

Background color

Invalid hex color — use #rrggbb format.

FAQ

What contrast ratio does WCAG require?: WCAG 2.1 Level AA requires 4.5:1 for normal text (below 18pt) and 3:1 for large text (18pt+ or 14pt bold). Level AAA requires 7:1 for normal text and 4.5:1 for large text.
Does this check UI components too?: Yes. Non-text UI components (icons, input borders, focus indicators) need a 3:1 ratio against adjacent colors under WCAG 1.4.11.
Can I enter colors in different formats?: Yes. HEX (#RRGGBB), RGB (rgb(r,g,b)), and HSL (hsl(h,s%,l%)) inputs are all supported.