Colour contrast checker
Check if your colour combinations meet WCAG 2.2 AA and AAA contrast requirements - with APCA preview scores.
Large text preview
Normal text preview - this is what body copy looks like with your chosen colour combination.
Small text preview - 14px regular weight, the hardest to read.
WCAG 2.2 contrast ratio
APCA Lc value: 1.0(WCAG 3.0 preview)
AA Normal text
Requires 4.5:1
AA Large text
Requires 3:1
AAA Normal text
Requires 7:1
AAA Large text
Requires 4.5:1
AA UI components
Requires 3:1
Contrast is one of 350+ checks Lumi runs on every scan. Colour contrast failures are the most common WCAG violation.
Understanding Colour Contrast Requirements
Colour contrast is one of the most fundamental accessibility requirements. WCAG 2.2 Success Criteria 1.4.3 (AA) and 1.4.6 (AAA) define minimum contrast ratios between text and its background to ensure content is readable by people with low vision or colour vision deficiencies.
WCAG AA vs AAA contrast ratios
WCAG AA requires a contrast ratio of at least 4.5:1 for normal text and 3:1 for large text (18pt or 14pt bold). AAA requires 7:1 for normal text and 4.5:1 for large text. Most regulations, including the EAA and EN 301 549, require AA compliance as the minimum.
What counts as large text?
Under WCAG, large text is defined as 18pt (24px) or larger at regular weight, or 14pt (approximately 18.66px) or larger at bold weight. Large text has lower contrast requirements because its increased size makes it inherently more legible.
APCA and WCAG 3.0
The Advanced Perceptual Contrast Algorithm (APCA) is the contrast method being developed for WCAG 3.0. Unlike the current WCAG 2.x formula, APCA accounts for perceptual differences between light and dark mode, text polarity, and font weight. The Lc (Lightness Contrast) value shown above is a preview - WCAG 3.0 is still in draft and APCA is not yet a formal requirement.
Non-text contrast (UI components)
WCAG 2.2 Success Criterion 1.4.11 requires UI components and graphical objects to have a contrast ratio of at least 3:1 against adjacent colours. This applies to form field borders, icons, charts, and interactive controls. Scan your site to check both text and non-text contrast automatically.