Question 1

What is WCAG color contrast?

Accepted Answer

WCAG (Web Content Accessibility Guidelines) specifies minimum contrast ratios between text and background colors to ensure readability for people with visual impairments. WCAG 2.1 Level AA requires a 4.5:1 ratio for normal text and 3:1 for large text. Level AAA requires 7:1 for normal text and 4.5:1 for large text.

Question 2

What counts as "large text" in WCAG?

Accepted Answer

Large text is defined as 18pt (24px) or larger for regular weight text, or 14pt (approximately 18.67px) or larger for bold text. Large text has a lower contrast requirement (3:1 for AA) because it is inherently easier to read.

Question 3

What is relative luminance?

Accepted Answer

Relative luminance is a measure of how bright a color appears to the human eye, on a scale from 0 (absolute black) to 1 (absolute white). The contrast ratio is calculated from the relative luminance of the two colors using the formula: (L1 + 0.05) / (L2 + 0.05).

Question 4

What contrast ratio do UI components need?

Accepted Answer

Non-text UI components (icons, form fields, focus indicators, charts) require a 3:1 minimum contrast ratio against adjacent colors under WCAG 2.1 Level AA.

Question 5

Does this tool work offline?

Accepted Answer

Yes. All contrast ratio calculations happen entirely in your browser using pure math. No network request is needed. The tool works offline once the page has loaded.

Question 6

What does the contrast ratio number mean?

Accepted Answer

The contrast ratio ranges from 1:1 (identical colors, no contrast) to 21:1 (black on white, maximum contrast). Higher numbers mean better readability. WCAG AA requires at least 4.5:1 for normal body text.

Color Contrast Checker — WCAG AA & AAA Accessibility Checker Free

WCAG Contrast Requirements Explained

Related Tools