Question 1

What contrast ratio is required for WCAG 2.1 AA compliance?

Accepted Answer

WCAG 2.1 Level AA requires a minimum contrast ratio of 4.5:1 for normal text (below 18pt regular or 14pt bold) and 3:1 for large text and UI components. Level AAA requires 7:1 for normal text and 4.5:1 for large text.

Question 2

How is a color contrast ratio calculated?

Accepted Answer

The WCAG contrast ratio is (L1 + 0.05) / (L2 + 0.05), where L1 is the lighter color's relative luminance and L2 is the darker color's. Luminance is derived from gamma-corrected sRGB values weighted by the eye's sensitivity to each channel (R×0.2126, G×0.7152, B×0.0722).

Question 3

What color formats does the contrast checker support?

Accepted Answer

The tool accepts HEX (#rrggbb / #rgb), RGB, RGBA, HSL, HSLA, LCH, and OKLCH. You can paste any valid CSS color value directly into the input fields.

Question 4

What is the difference between WCAG AA and AAA compliance?

Accepted Answer

AA (4.5:1 for normal text) is the widely adopted legal minimum for commercial websites and apps. AAA (7:1 for normal text) is the enhanced standard for critical content such as medical, legal, or financial text. Most design teams target AA compliance as the baseline.

Question 5

Does the contrast requirement apply to icons and UI controls?

Accepted Answer

Yes. WCAG 2.1 Success Criterion 1.4.11 (Non-text Contrast) requires a 3:1 contrast ratio for UI component boundaries, states (focus, hover, active), and graphical objects like icons. This is the same threshold as AA large text.

WCAG Contrast Checker